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

Question

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

Answer 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}
/>