React-Virtualized：强制行样式重绘而不是 styleCache

Question

在 Table 中，我的行根据数据具有不同的高度。例如：

一切正常，直到我对列进行排序并且缓存的行高输出了不希望的结果。

我发现是 top css 属性 导致了结果

它由缓存重置，我认为这正在发生 here。

但我仍然不知道如何解决这个问题。

Answer 1

top 属性 是 react-virtualized 定位窗口行的方式。 （您可能想逐步完成几个 these slides 以大致了解库的工作原理。）

你是对的，问题最终是缓存问题。如果 list/table/grid 的数据发生变化，您需要让 react-virtualized 知道它的缓存大小可能无效。假设您的 Table 上有一个 ref 句柄，那么您可以像这样调用 recomputeRowHeights：

// Passing 0 (or no index) means to recompute all rows
tableRef.recomputeRowHeights(0);

您是否使用 CellMeasurer 来衡量您的 Table 行数？如果是这样，您需要确保传递的 keyMapper 知道如何通过 id 而不是 index[=35 来识别您的行=]. （这样您就不需要在排序操作后重新测量每一行。）例如：

const keyMapper = (rowIndex, columnIndex) => {
  const data = yourArray[rowIndex]; // Assuming your data is in an Array
  return `${data.id}:${columnIndex}`; // Assuming your data has an 'id' attribute
}

它是用 List 而不是 Table 构建的，但您可以看到 mock Twitter app (source code here 中使用 CellMeasurer 的示例。