奇怪的交互“react-virtualize”与“react-sortable-hoc”一起工作答案

【问题标题】：Weird interaction 'react-virtualize'd working with 'react-sortable-hoc'奇怪的交互“react-virtualize”与“react-sortable-hoc”一起工作
【发布时间】：2017-11-30 06:03:09
【问题描述】：

https://codesandbox.io/s/qYEvQEl0

所以我自己编写了一个演示，与一个有效的示例相比，它不起作用，唯一的区别是 <List/> 的一个道具

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

rowHeight={50}

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

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

从duplicate GitHub issue you filed复制的答案;）

这会在每次渲染时创建一个新的函数道具：

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

即使没有其他属性发生变化，prop-change 也足以触发子组件的重新渲染。在上面的第二个例子中，props 根本没有改变，所以List 不知道它需要重新渲染。（查看文档中的the section on "pure components" 了解更多信息。）

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

【讨论】：

虽然在实际项目中我使用 redux 来管理状态，但相同的 rowHeight={({ index }) => 50} 不会以某种方式触发重新渲染。我想知道为什么？（使用 props 将 redux 状态传递给 List 来修复它，但我仍然很好奇）
我不知道你的项目设置，抱歉。不能说。