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

Question

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

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

看看这个代码和盒子

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

第一个问题：如何让 React 函数组件使用新的 props 重新渲染，就像在codesandbox示例中类组件重新渲染一样？

第二个问题：是否有更好的方法来更新 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. Cell渲染器功能

当您没有刷新要求时，应该使用单元格渲染器函数，这在 ag-grid 文档中提到了。

根据文档-

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

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

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

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

2. Cell渲染器组件

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

这意味着如果底层数据发生变化，您的组件将被销毁并重新创建。

3.刷新单元格

另请注意，使用api.refreshCells()不会按原样工作，因为 ag-grid 使用更改检测来刷新单元格，同时确定要刷新哪些单元格，并且因为本质上其他两列的值不会更改，但实际上它们在 cellRenderer 本身中发生了更改。

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

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

来自文档-

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