将行动态添加到 React-data-grid答案

【问题标题】：Dynamically adding rows to React-data-grid将行动态添加到 React-data-grid
【发布时间】：2019-02-28 00:34:12
【问题描述】：

我刚开始探索 React-data-grid，我注意到您必须设置 rowCount，这让我想知道是否可以动态添加更多行。我正在使用 websockets 来获取将作为行添加到表中的数据。如果不支持，这可能会成为交易杀手。

【问题讨论】：

【解决方案1】：

可以动态添加行。假设您将内容保持在状态：

this.state = {
    rows: this.props.content,
};

还有一个函数可以从服务器获取新内容并更新状态：

getNewData() {
    const newData = this.props.someMagicFunction();
    this.setState(prevState => ({rows: [...prevState.rows, ...newData]}));
}

rowsCount 不是问题，因为您可以将其读取为this.state.rows.length，因此当您更新状态中的行时，您将获得更新的 rowsCount。

渲染器：

<ReactDataGrid
    columns={this.props.heads}
    rowGetter={this.rowGetter}
    rowsCount={this.state.rows.length}
/>

【讨论】：

您知道如何使添加的行可编辑吗？我已经应用了您的解决方案（谢谢），但我无法编辑添加行的单元格。由于相应列的editable: true 属性，最初呈现的行是可编辑的（另外还有该列的自定义编辑器）。