AG-Grid React 列组状态打开和关闭

Question

我正在使用 AG Grid 社区版，并且我有一个（可能）愚蠢的反应问题。我有一些列组，其中一些列是隐藏的，直到您单击列组标题。我正在实现一个搜索功能来查询 API 并在网格中显示数据。我发现当您在搜索框中输入任何内容时，列分组将重置为原始状态。对于我的一生，我无法弄清楚这一点。我将所有内容放入状态，尝试了 useMemo、useCallback，但我仍然遇到这种奇怪的行为。

示例代码如下：

const App = () => {
  const [colDefs, setColDefs] = React.useState(columnDefs);
  const [searchString, setSearchString] = React.useState("");

  const onSearchInput = React.useCallback((e) => {
    setSearchString(e.target.value);
  }, []);

  return (
    <div>
      <input type="text" onChange={onSearchInput} />

      <div
        style={{ width: "100%", height: "80vh" }}
        className="ag-theme-material"
      >
        <AgGridReact
          columnDefs={colDefs}
          defaultColGroupDef={{ marryChildren: true }}
          defaultColDef={{
            filter: false,
            resizable: true,
            wrapHeaderText: true,
            autoHeaderHeight: true
          }}
          rowData={sample}
        />
      </div>
    </div>
  );
};

重现步骤

1. 展开“项目”列组，查看新公开的列“业务单位”和“预算代码”（等）
2. 在网格上方的搜索框中输入内容。
3. 请注意，列组现在已折叠。

Answer 1

我可以通过将 AG-Grid 组件移至其自己的功能组件并使用

React.Memo

来记忆它来解决此问题。

// ### GridComponent.js ###
import { AgGridReact } from "ag-grid-react";

export const GridComponent = React.memo((props) => {
  const { colDefs, rowData } = props;
  console.log(`Rendering ${rowData.length} rows`);
  return (
    <div
      style={{ width: "100%", height: "80vh" }}
      className="ag-theme-material"
    >
      <AgGridReact
        columnDefs={colDefs}
        defaultColGroupDef={{ marryChildren: true }}
        defaultColDef={{
          filter: false,
          resizable: true,
          wrapHeaderText: true,
          autoHeaderHeight: true
        }}
        rowData={rowData}
      />
    </div>
  );
});

并使用 props 调用组件：

// ## index.js ##
<GridComponent colDefs={colDefs} rowData={rowData} />

这里是完整的示例，其中包含一些虚假的异步数据获取操作。