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-08：看来，调用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);

重置行高会导致错误的行偏移量得到计算

1 个答案: