动态添加行到 React-data-grid
Dynamically adding rows to React-data-grid
我刚开始探索 React-data-grid,我注意到您必须设置 rowCount,这让我想知道是否可以动态添加更多行。我正在使用 websockets 获取数据,这些数据将作为行添加到 table。如果不支持,这可能会成为交易杀手。
可以动态添加行。假设您将内容保持在以下状态:
this.state = {
rows: this.props.content,
};
此外,您还有一个从服务器获取新内容并更新状态的功能:
getNewData() {
const newData = this.props.someMagicFunction();
this.setState(prevState => ({rows: [...prevState.rows, ...newData]}));
}
rowsCount
不是问题,因为您可以将其读作 this.state.rows.length
,因此当您更新状态中的行时,您将获得更新的行数。
渲染器:
<ReactDataGrid
columns={this.props.heads}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
/>
我刚开始探索 React-data-grid,我注意到您必须设置 rowCount,这让我想知道是否可以动态添加更多行。我正在使用 websockets 获取数据,这些数据将作为行添加到 table。如果不支持,这可能会成为交易杀手。
可以动态添加行。假设您将内容保持在以下状态:
this.state = {
rows: this.props.content,
};
此外,您还有一个从服务器获取新内容并更新状态的功能:
getNewData() {
const newData = this.props.someMagicFunction();
this.setState(prevState => ({rows: [...prevState.rows, ...newData]}));
}
rowsCount
不是问题,因为您可以将其读作 this.state.rows.length
,因此当您更新状态中的行时,您将获得更新的行数。
渲染器:
<ReactDataGrid
columns={this.props.heads}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
/>