ag-grid-react cellrenderer 类基础组件,函数基础组件错误

问题描述

我有一个关于 ag-grid cellender 的问题。

使用 CellRender 时,类基组件不会失败。 使用Function Base Component时出错。

我正在使用材质 ui,并想通过 Cell Render 和 Function Base 组件创建一个按钮操作。

const columnDefs = [
  {
    field: 'action',headerName: 'Action',cellRenderer: 'actionRenderer',},]

<AgGridReact
    style={TableStyle}
    rowData={codeData}
    rowSelection="multiple"
    suppressRowClickSelection={true}
    columnDefs={columnDefs}
    onSelectionChanged={handleSelectionChange}
    frameworkComponents={{
        actionRenderer: ActionRenderer,}}
/>

Class Base Component CellRenderer 没有错误

import { Button } from '@material-ui/core';
import React,{ Component } from "react";

export default class ActionRenderer extends Component {

    render() {
        return (
          <Button>
            Button
          </Button>
        );
    }
}

enter image description here

函数基础组件 CellRenderer 出错

import { Button } from '@material-ui/core';
import React from "react";

function ActionRenderer() {
    return (
        <Button>
            Button
        </Button>
    );
}
export default ActionRenderer

enter image description here

错误信息

reactComponent.js:57 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted'event. Consider using MutationObserver to make the page more responsive.
ReactComponent.init @ reactComponent.js:57
UserComponentFactory.initComponent @ ag-grid-community.cjs.js:13428
UserComponentFactory.createAndInitUserComponent @ ag-grid-community.cjs.js:13181
UserComponentFactory.newCellRenderer @ ag-grid-community.cjs.js:13119
createCellRendererFunc @ ag-grid-community.cjs.js:19360
AnimationFrameService.executeFrame @ ag-grid-community.cjs.js:35597

reactComponent.js:57 位置 = /node_modules/ag-grid-react/lib/reactComponent.js:57

    ReactComponent.prototype.init = function (params) {
    var _this = this;
    this.eParentElement = this.createParentElement(params);
    this.renderStaticmarkup(params);
    if (this.isstatelessComponent()) {
        this.eParentElement.addEventListener('DOMNodeInserted',this.statelessDomInsertedListener,false);
    }
    

过去一周一直在ag-grid-react中搜索DOMNodeInserted和MutationObserver,也看过官方文档,但没有找到。

请帮帮我。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)