如何更新 Ag Grid 状态栏自定义组件中的道具

Question

我正在开发一个基本的 Ag Grid React 应用程序，我向网格添加了一个自定义状态栏组件，using their docs。我的目标是在将过滤器应用于网格时更新状态栏中的“总行数”项目，但是我无法更改状态栏中的值。状态栏组件使用继承自 Grid 的状态变量作为 prop，但是当 prop 发生变化时，状态栏不会重新渲染以反映这一点。

Here's a demo 这表明即使传递给状态栏组件的 prop 发生变化，也没有任何反应。您可以通过单击按钮进行测试，控制台将显示“总计”变量递增，但状态栏保持不变。

相关代码片段：

import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';

const CustomStatusBar = props => {
  return (
    <div className="ag-status-bar-center">
      <div className="ag-status-name-value ag-status-panel ag-status-panel-total-row-count">
        <span className="label">Total Rows</span>:&nbsp;
        <span className="ag-status-name-value-value">{props.total}</span>
      </div>
    </div>
  );
};

const App = () => {
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];
  const [total, setTotal] = useState(3);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={rowData}
        frameworkComponents={{
          customStatusBar: CustomStatusBar
        }}
        statusBar={{
          statusPanels: [
            {
              statusPanel: 'customStatusBar',
              align: 'center',
              statusPanelParams: { total: total }
            }
          ]
        }}
      >
        <AgGridColumn field="make" />
        <AgGridColumn field="model" />
        <AgGridColumn field="price" />
      </AgGridReact>
      <button
        onClick={() => {
          setTotal(prevTotal => {
            console.log(prevTotal);
            return prevTotal + 1;
          });
        }}
      >
        Click me
      </button>
    </div>
  );
};

render(<App />, document.getElementById('root'));

Answer 1

而不是在 statusPanelParams 中传递 total。我建议在自定义状态栏上定义一个 getter/setter 辅助方法，并在需要时传入 total 值，以便您可以更新它。

您可以这样获取状态栏实例：

// example - get status bar component
const statusBarComponent = gridOptions.api.getStatusPanel('statusBarCompKey');
if (statusBarComponent) {
    componentInstance = statusBarComponent.getFrameworkComponentInstance();
}

如果你定义了一个方法，例如updateTotal在状态栏上，可以这样调用：

componentInstance.updateTotal(total)

有关详细信息，请参阅此示例：https://www.ag-grid.com/react-data-grid/component-status-bar/#accessing-status-bar-panel-instances

如何更新 Ag Grid 状态栏自定义组件中的道具

How to update props in Ag Grid status bar custom component

reactjs

ag-grid

ag-grid-react