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

从容器访问组件状态AG网格

1 个答案: