奇怪的交互'反应 - 虚拟化与'react-sortable-hoc'一起工作

Question

https://codesandbox.io/s/qYEvQEl0

所以我自己写了一个演示，与一个有效的样本相比没有用，唯一的区别是<List/>的一个道具

rowHeight={({ index }) => 50}

rowHeight={50}

我使用后一种方式。它不起作用。为什么呢？

Answer 1

从duplicate GitHub issue you filed;）

复制的答案

每次渲染时都会创建一个新的函数prop：

rowHeight={({ index }) => 50}

即使没有其他属性发生更改，prop-change也足以触发子组件的重新呈现。在上面的第二个示例中，没有任何道具发生变化，因此List不知道它需要重新渲染。 （有关详细信息，请查看文档中的the section on "pure components"。）

在这种情况下，您可以传递一个小的属性，该属性在每次排序顺序更改时都会更改（例如，递增的计数器），以使组件知道重新渲染。您也可以拨打forceUpdate。