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

Question

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

一切正常，直到我对列进行整理并且缓存的行高度输出不良结果。

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

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

但我仍然无法弄清楚如何解决这个问题。

Answer 1

top属性是反应虚拟化位置窗口行的方式。 （您可能需要逐步介绍几个these slides，以了解库的工作原理。）

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

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

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

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中看到CellMeasurer使用的示例（源代码here }）。