javascript - 从容器访问组件状态 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());
  };

我可以验证它是否正常工作，因为我可以 console.log componentDidUpdate 上的状态，并且它在控制台中正确显示行数。我将此组件传递到另一个容器以显示此网格，但是，我想将此 displayedCount 状态作为容器中的文本输出获取。

我怎样才能最好地实现这一目标？

Answer 1

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

否则，您可以将回调函数作为 prop 传递给 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