1

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

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

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

4

1 回答 1

7

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

您可能会发现这个演示很有用。它强调的关键部分是 - 如果行(或列)大小可能发生变化 - 您需要首先让CellMeasurer知道重新测量该行。resetMeasurements重置所有测量值,但如果只有一行发生了变化,那么使用起来会更resetMeasurementForRow(index)高效(或者,你猜对了,resetMeasurementForColumn(index))。

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

于 2016-11-17T16:13:25.013 回答