AG-Grid React，无法在数据更改时更新自定义单元格渲染器。 Function 组件的行为不同于 class 组件

Question

我在整个反应应用程序中使用 AG-Grid，在某些情况下，我希望 cellRenderer 在网格数据更改时更新。 在以下两种情况下，cellRenderer 最初都会正确加载，但不会在数据更改时更新：

1. 用户编辑可编辑单元格并更改值。
2. 服务器更新redux中的网格数据

查看此代码框

在此示例中，我使用可编辑单元重新创建了第一个用例，并使用了 class 组件和 function 组件。 使用 onCellValueChanged 和 params.api.refreshCells() 我能够更新 class 组件，但不能更新 function 组件。

第一个问题：如何让 function 组件用新道具重新渲染，就像 class 组件在代码沙箱示例中重新渲染一样？

第二个问题：有没有更好的方法来更新 cellRenderer 而无需在数据更新时卸载和重新安装列中的每个单元格？

提前感谢您的帮助和指导！

...
    this.state = {
      columnDefs: [
        {
          headerName: "Editable Country",
          editable: true,
          field: "country",
          width: 200
        },
        {
          headerName: "Class Render",
          cellRendererFramework: GridCellClass,
          colId: "class-renderer",
          width: 200
        },
        {
          headerName: "Function Render",
          cellRendererFramework: GridCellFunction,
          colId: "function-renderer",
          width: 200
        }
      ],
      rowData: []
    };
  }

...

            <AgGridReact
              rowModelType="infinite"
              columnDefs={this.state.columnDefs}
              enableColResize={true}
              rowClassRules={{
                california: function(params) {
                  return params.data.country === "California";
                }
              }}
              onCellValueChanged={function(params) {
                return params.api.refreshCells({
                  force: true,
                  columns: ["class-renderer", "function-renderer"]
                });
              }}
              onGridReady={this.onGridReady.bind(this)}
              rowData={this.state.rowData}
            />
...

// This one updates!
import React, { Component } from "react";

class GridCellClass extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { data } = this.props;

    return (
      <div>
        {data.country === "California" ? "CALIFORNIA!!!" : "Not California"}
      </div>
    );
  }
}

export default GridCellClass;

// This one does not update.
import React from "react";

function GridCellFunction(props) {
  const { data } = props;

  return (
    <div>
      {data.country === "California" ? "CALIFORNIA!!!" : "Not California"}
    </div>
  );
}

export default GridCellFunction;

Answer 1

1.单元格渲染器 Function

当您没有刷新要求时，应使用单元格渲染器 function，这在 ag-grid 文档中有所提及。

根据文档-

如果您没有刷新或清理要求（即您不需要实现刷新或销毁功能），请使用单元格渲染器的 function 变体。

这就是您的单元格渲染器 function 不刷新的原因。

要解决您的问题，您可以这样做 -

      onCellValueChanged={function(params) {
        if(params.column.getId() === 'country') {
          params.api.redrawRows();
        }
      }}

2.单元格渲染器组件

您的GridCellClass在api.refreshCells()上工作的原因是因为您尚未在GridCellClass组件中实现refresh() ，因此网格会为您处理refresh() 。

这意味着如果基础数据发生更改，您的组件将被销毁并重新创建。

3.刷新单元格

另请注意，使用api.refreshCells()将无法正常工作，因为 ag-grid 在确定要刷新哪些单元格的同时使用更改检测来刷新单元格，因为基本上其他 2 列的值不会改变，但实际上它们已更改cellRenderer 本身。

但是，以下适用于GridCellClass因为您通过传递force:true禁用更改检测，

       params.api.refreshCells({
          force: true
        });

从文档-

更改检测将用于仅刷新显示单元格值与实际值不同步的单元格。 如果使用带有 refresh 方法的 cellRenderer，则将调用 refresh 方法。