如何将反应虚拟化的CellMeasurer重新渲染具有动态高度的连接组件?

时间:2016-11-17 13:20:24

标签: redux react-virtualized

react-virtualized项目使我能够有效地呈现非常大的组件列表。在我的项目中,列表项是容器组件,即连接到redux存储的组件。他们只知道他们的ID,容器组件负责获取所有相关数据,例如正文,日期,用户名等。

我面临的问题是计算这些组件的高度。 React-virtualized有CellMeasurer component用于计算动态高度,但CellMeasurer测量组件默认状态的高度,在我的容器组件中为0,因为当容器组件尚未获取数据时第一次渲染。

当容器加载内容时,有没有办法强制重新计算组件高度?

1 个答案:

答案 0 :(得分:5)

反应 - 虚拟化积极地缓存测量和位置数据以提高性能。它提供了一个API来重置特定行或列的数据。 :)

您可能会发现this demo对于浏览非常有用。它强调的关键部分是 - 如果行(或列)大小可能已更改 - 您需要首先让CellMeasurer知道重新测量行。 resetMeasurements会重置所有测量值,但如果只有一行更改,那么使用resetMeasurementForRow(index)(或者,您猜对了,resetMeasurementForColumn(index))的效果会更高。

接下来,您需要让List(或TableGrid)知道尺寸也发生了变化 - 因为尺寸会影响位置,而这些组件会缓存位置数据。如果您正在使用TableList,那么您要使用的方法是recomputeRowHeights(index)。如果您正在使用Grid,那么它将是recomputeGridSize ({ columnIndex, rowIndex })