react-virtualized - 重置行高会导致计算不正确的行偏移

Question

InfiniteLoader 的内部我有一个 List ，其rowRenderer回调创建一个 <div>由 CellMeasurer 包裹(我也为此使用缓存)。行的大小可以有很大的不同，但这种设置非常适合滚动。

但是，每行中的元素可以根据用户输入动态改变高度。在这些情况下，我会调用:

cellMeasurerCache.clear(rowIndex, 0);
this._listRef.recomputeRowHeights(rowIndex);

但在某些情况下，这会导致行跳动——这是因为 top值计算不正确。例如，我正在显示一个文档，其中在 List 中呈现以下行:

rowIdx        height       top
  3            668px       420px
  4           8547        1088
  5           2420        9635

然后行的高度 4 略微增加(~50px)。使用 rowIndex == 4 运行上述代码后，我看到以下行:

rowIdx        height       top
  5           2420px      3088px
  6           1156        5508
  7           4718        6664
  8           1050       11382

如您所见，行 5 现在有一个不正确的 top值，导致行跳来跳去。我假设行的高度 4 没有得到正确测量。

怎么了？

2017 年 11 月 8 日更新:似乎调用 cellMeasurerCache.clear(rowIndex, 0)将该行的高度替换为 estimatedRowSize 的值，这是非常不同的。与文档所说的相反，它似乎没有重新测量。
CellMeasurer._maybeMeasureCell()不调用行 4 在它获得默认高度之后。我的 rowRenderer回调(在我的内容周围创建 CellMeasurer)仅从行 开始调用5 .因此，代码已决定使用行 显示哪些行4 具有小得多的默认高度，而不是事先计算。

Answer 1

不确定这是否是处理此问题的正确/最佳方法，但我能够像这样工作:

首先，我使用了CellMeasurer的回调版本，存储measure回调供以后使用(每行存储):

rowRenderer = ({ key, index, style, isScrolling, parent }) => {
  const getContent = measure => {
    // store callback for later use
    this._measureCallbacks[index] = measure;

    // ... get your content ...
    return content;
  };

  return (
    <CellMeasurer
      key={key}
      cache={cellMeasurerCache}
      columnIndex={0}
      parent={parent}
      rowIndex={index}
    >
      {({ measure }) => (
        <div key={key} style={style}>
          {getContent(measure)}
        </div>
      )}
    </CellMeasurer>
  );
};

稍后，当行高发生变化时，而不是调用 cellMeasurerCache.clear() ，我跑:

// tell row to re-measure
this._measureCallbacks[rowIndex]();
// tell list to recompute row offsets
this._listRef.recomputeRowHeights(minRow);