从容器访问组件状态 AG Grid

Question

我有一个呈现 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 上 console.log 状态，并在控制台中正确显示行数。我正在将此组件传递给另一个容器以显示此网格，但是，我希望将此 displayCount 状态作为容器中的文本输出。

我怎样才能做到最好？

Answer 1

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

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

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