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

Question

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

用户编辑可编辑单元格并更改值。

服务器更新redux中的网格数据

看看这个 codesandbox

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

第一个问题:如何让 react 函数组件用新的 props 重新渲染，就像在代码框示例中类组件重新渲染一样？

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

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

根据 docs -

Use the function variant of a cell renderer if you have no refresh or cleanup requirements (ie you don't need to implement the refresh or destroy functions).

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

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

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

2. 单元格渲染器组件

你的原因 GridCellClass作品 api.refreshCells()是因为网格处理 refresh()给你，因为你还没有实现 refresh()在您的 GridCellClass零件。

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

3. 刷新细胞

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

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

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

从文档-

Change detection will be used to refresh only cells who's display cell values are out of sync with the actual value. If using a cellRenderer with a refresh method, the refresh method will get called.