我有一个像这样的 react 虚拟化列表(使用列表组件):
renderItem = ({ index, key, style }) => {
const {
entries,
projectId,
} = this.props;
const entry = entries[index];
return (
<div key={key} style={style}>
<MyItem
entry={entry}
entryIndex={index}
projectId={projectId}
/>
</div>
);
}
<List
rowHeight={75}
rowRenderer={this.renderItem}
rowCount={entries.length}
width={780}
height={1000}
/>
MyItem
连接到一个 redux store 并且可以与之交互。但是,在我滚动列表之前,它不会反射(reflect)屏幕上的任何更改,一旦我滚动,我就会看到列表项,因为它应该是自 MyItem's
以来的更新。 render()
终于被调用了。当 Prop 发生变化时,如何获得 react 虚拟化以重新渲染列表项?
最佳答案
我很确定您可以简单地将有问题的 Prop 传递到您的列表中。它看起来像这样。
<List
rowHeight={75}
rowRenderer={this.renderItem}
rowCount={entries.length}
width={780}
height={1000}
data={entries} // this prop can be called anything
/>
当然 List 实际上并没有一个叫做
data
的属性。 ,但是将您的数据集作为 Prop 传递将告诉列表在数据更改时重新渲染。在底层,List 和其他组件使用 PureComponent,只要您传递给它们的 Prop 发生变化,就会触发重新渲染。你可以阅读更多关于这个 here .
注意:我实际上并没有使用列表组件完成此操作,但已经使用 MultiGrid 组件完成了此操作。在我的用例中,我允许用户对数据进行排序,并且需要将数据集传递给 MultiGrid,以便在数据更改时重新呈现。
希望这可以帮助。
关于javascript - 在我滚动之前,react-virtualized 列表项不会使用更改的 Prop 重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52769760/