javascript - 在我滚动之前，react-virtualized 列表项不会使用更改的 Prop 重新渲染

Question

我有一个像这样的 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 虚拟化以重新渲染列表项？

Answer 1

我很确定您可以简单地将有问题的 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，以便在数据更改时重新呈现。

希望这可以帮助。