具有反应虚拟化和新 CellMeasurer 的动态行高 [英] Dynamic row heights with react-virtualized and new CellMeasurer

问题描述

我正在使用带有 Autosizer、List 和 CellMeasurer 组件的 react-virualized 9.当列表数据发生变化时，我需要更新行高.看来，由于版本 9 中支持 React Fiber 的更改，CellMeasurer 的唯一公共方法现在是 measure().大多数示例使用之前的 resetMeasurementForRow() 方法.当前的 CellMeasurer doc 似乎没有任何有关新公共方法的信息.不确定我是否忽略了一些东西，但任何帮助表示赞赏.

I'm using react-virualized 9 with Autosizer, List, and CellMeasurer components. I need to update the row heights when the list data has changed. It appears that since the changes to support React Fiber in version 9 the only public method for CellMeasurer is now measure(). Most of the examples use the previous resetMeasurementForRow() method. The current CellMeasurer doc doesn't seem to have any info on the new public methods. Not sure if I've overlooked something but any help is appreciated.

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();
  }
}

推荐答案

当列表数据发生变化时，我需要更新行高.当前的 CellMeasurer 文档似乎没有关于新公共方法的任何信息.

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.但在这种情况下，您需要做两件事来响应行数据/大小的变化:

Admittedly the docs could be improved, with regard to the new CellMeasurer. In this case though, you need to do 2 things in respond to your row data/sizes changing:

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

1. If a specific list-item has changed size then you need to clear its cached size so it can be remeasured. You do this by calling clear(index) on CellMeasurerCache. (Pass the index of the row that's changed.)
2. Next you'll need to let List know that its size information needs to be recalculated. You do this by calling recomputeRowHeights(index). (Pass the index of the row that's changed.)

有关类似于您所描述的内容的示例，请查看示例类似 Twitter 的应用我用反应虚拟化构建.你可以看到源

For an example of something similar to what you're describing, check out the example Twitter-like app I built with react-virtualized. You can see the source here.

这篇关于具有反应虚拟化和新 CellMeasurer 的动态行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！