从容器访问组件状态 AG Grid答案

【问题标题】：Accessing Component state AG Grid from a container从容器访问组件状态 AG Grid
【发布时间】：2020-06-24 10:46:51
【问题描述】：

我有一个渲染 AgGrid 的组件。我将 rowCount 更新为此组件的状态，但是，我需要从显示此组件的容器中访问此数字（状态）

这是我的国家

class ClientOrderHistory extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: createColumnDefs(props.OrderHistoryReducer.columnDefs),
      gridAPI: null,
      displayedCount: 0
    };
  }

onGridReady，我更新了计算行数的函数

  onGridReady = params => {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
    this.setState({ gridAPI: params.api, columnAPI: params.columnApi });
    this.columnApi.autoSizeAllColumns();
    this.setState({displayedCount: this.gridApi.getDisplayedRowCount()});
    console.log('rowsCount', this.gridApi.getDisplayedRowCount());
  };

我可以验证它是否正常工作，因为我可以控制台记录 componentDidUpdate 上的状态，它会在控制台中正确显示行数。我将此组件传递给另一个容器以显示此网格，但是，我希望将此 displayCount 状态作为容器中的文本输出来获取。

我怎样才能做到最好？

【问题讨论】：

标签： javascript reactjs react-redux ag-grid

【解决方案1】：

您应该在容器中使用 onGridReady 并将其作为道具传递给您的 AgGrid 组件。我就是这么用的。

否则，您可以将回调函数作为道具传递给您的 AgGrid 组件，并在您的 AgGrid 组件上执行 onGridReady 时调用：

onGridReady = params => {
  this.gridApi = params.api;
  this.columnApi = params.columnApi;
  this.setState({ gridAPI: params.api, columnAPI: params.columnApi });
  this.columnApi.autoSizeAllColumns();
  this.setState({displayedCount: this.gridApi.getDisplayedRowCount()});
  // your callback fn as prop
  if (this.props.callback) {
    this.props.callback(this.gridApi.getDisplayedRowCount());
  }
};

在您的容器上：

callback = (rowCount) => // do stuff here

【讨论】：