具有反应虚拟化和新 CellMeasurer 的动态行高

Question

我正在使用带有 Autosizer、List 和 CellMeasurer 组件的 react-virtualized 9。当列表数据发生变化时，我需要更新行高。似乎自从版本 9 中支持 React Fiber 的更改以来，CellMeasurer 的唯一 public 方法现在是 measure()。大多数示例使用前面的 resetMeasurementForRow() 方法。当前 CellMeasurer doc 似乎没有关于新 public 方法的任何信息。不确定我是否忽略了某些内容，但我们将不胜感激。

const cache = new CellMeasurerCache({
  defaultHeight: 60,
  fixedWidth: true
});

<AutoSizer>
  {({ width, height }) => (
    <List
      deferredMeasurementCache={cache}
      height={height}
      ref={element => { this.list = element; }}
      rowCount={list.length}
      rowHeight={cache.rowHeight}
      rowRenderer={this.rowRenderer}
      width={width}
    />
  )}
</AutoSizer>

rowRenderer({ index, key, parent, style }) {
  return (
    <CellMeasurer
      cache={cache}
      columnIndex={0}
      key={key}
      overscanRowCount={10}
      parent={parent}
      ref={element => { this.cellMeasurer = element; }}
      rowIndex={index}
    >
      {({ measure }) => {
        this.measure = measure.bind(this);

        return <MyList index={index} data={list[index]} style={style} />;
      }}
    </CellMeasurer>
  );
}

componentWillReceiveProps(nextProps) {
  // Some change in data occurred, I'll probably use Immutable.js here
  if (this.props.list.length !== nextProps.list.length) {
    this.measure();
    this.list.recomputeRowHeights();
  }
}

Answer 1

I need to update the row heights when the list data has changed. The current CellMeasurer doc doesn't seem to have any info on the new public methods.

诚然，关于新的 CellMeasurer，文档可以改进。但是在这种情况下，您需要做两件事来响应行 data/sizes 更改：

如果特定列表项的大小发生了变化，那么您需要清除其缓存的大小以便重新测量。您可以通过在 CellMeasurerCache 上调用 clear(index) 来完成此操作。（传递已更改行的 index。）
接下来您需要让 List 知道它的大小信息需要重新计算。您可以通过调用 recomputeRowHeights(index) 来完成此操作。（传递已更改行的 index。）

有关与您所描述内容类似的示例，请查看示例 Twitter-like app I built with react-virtualized. You can see the source here。

Answer 2

if (this.props.list.length !== nextProps.list.length) {
  cache.clearAll();
}

这对我有帮助！ :)

具有反应虚拟化和新 CellMeasurer 的动态行高

Dynamic row heights with react-virtualized and new CellMeasurer

javascript

reactjs

react-virtualized