react-virtualized CellMeasurer如何重新渲染具有動態高度的連接組件？

Question

react-virtualized項目使我能夠高效地呈現非常大的組件列表。在我的項目中，列表項是容器組件，即連接到redux商店的組件。他們只知道他們的ID，而容器組件負責提取所有相關數據，如正文，日期，用戶名等。

我面對的問題是計算這些組件的高度。 React-virtualized有一個CellMeasurer component用於計算動態高度，但CellMeasurer測量組件默認狀態的高度，在我的容器組件中爲0，因爲數據尚未由容器組件在第一次呈現時獲取。

有沒有一種方法可以在容器加載內容時強制重新計算組件高度？

Answer 1

react-virtualized積極緩存測量和位置數據的性​​能。它提供了一個API來重置特定行或列的數據。 :)

你可能會發現this demo有用的一瞥。它強調的關鍵部分是 - 如果行（或列）的大小可能發生變化，您需要首先讓CellMeasurer知道重新測量該行。 resetMeasurements重置所有的測量結果，但如果只有一行發生了變化，那麼使用resetMeasurementForRow(index)（或者你猜對了，resetMeasurementForColumn(index)）的性能會更高。

下一步，你需要讓List（或Table或Grid）知道，因爲大小會影響位置和這些組件緩存位置數據的大小已更改須─。如果您使用的是Table或List，那麼您要使用的方法是recomputeRowHeights(index)。如果您使用Grid那麼它將是recomputeGridSize ({ columnIndex, rowIndex })。