我有一个这样的反应虚拟列表(使用List组件):
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存储并可以进行交互。但是,直到我滚动列表,它才反映出屏幕上的任何更改,因为我最终看到了MyItem's
render()
,所以一旦滚动,我便看到了列表项及其更新。 / p>
当道具更改时,如何进行虚拟反应以重新呈现列表项?
答案 0 :(得分:1)
我很确定您可以将有问题的道具简单地传递到列表中。看起来像这样。
<List
rowHeight={75}
rowRenderer={this.renderItem}
rowCount={entries.length}
width={780}
height={1000}
data={entries} // this prop can be called anything
/>
当然,列表实际上没有称为data
的道具,但是将数据集作为道具传递将告诉列表在数据更改时重新呈现。
注意:我实际上从未使用list组件执行此操作,但是使用MultiGrid组件进行了此操作。在我的用例中,我允许用户对数据进行排序,并且需要将数据集传递到MultiGrid,以便在数据更改时重新呈现它。
希望这会有所帮助。
答案 1 :(得分:0)
我找到了另一种适合我的解决方案。 我创建了一个包含数据长度的不可见元素。
<div>
<span style={{ display: 'none' }}>{yourData.length}</span>
<List ... />
</div>
我正在寻找一种解决方案来在有人写消息时更新我的聊天记录 (socket.io)。这对我来说是最好的解决方案,因为 forceUpdate
不起作用,额外的 prop
呈现所有元素,这会为我的代码中的每个聊天气泡触发动画。