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

时间:2017-05-07 22:16:21

标签: javascript reactjs react-virtualized

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

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

2 个答案:

答案 0 :(得分:22)

  

我需要在列表数据发生变化时更新行高。   目前的CellMeasurer doc似乎没有关于新公共方法的任何信息。

不可否认,就新CellMeasurer而言,文件可以得到改进。但在这种情况下,您需要做两件事来响应您的行数据/尺寸更改:

  1. 如果特定列表项已更改大小,则需要清除其缓存大小,以便可以重新测量。您可以在clear(index)上致电CellMeasurerCache来执行此操作。 (通过已更改行的index。)
  2. 接下来,您需要让List知道需要重新计算其大小信息。您可以致电recomputeRowHeights(index)来完成此操作。 (通过已更改行的index。)
  3. 有关您所描述的类似内容的示例,请查看我使用react-virtualized构建的示例Twitter-like app。您可以看到来源here

答案 1 :(得分:0)

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

这对我有帮助! :)