通过反应虚拟化和新的CellMeasurer实现动态行高

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用带有Autosizer，List和CellMeasurer组件的react-viralized

9。列表数据更改后，我需要更新行高。看来，由于在版本9中进行了更改以支持React

Fiber，所以CellMeasurer的唯一公共方法现在是measure（）。大多数示例使用以前的resetMeasurementForRow（）方法。当前的CellMeasurer文档似乎没有有关新公共方法的任何信息。不知道我是否忽略了某些内容，但可以提供任何帮助。

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文档似乎没有有关新公共方法的任何信息。

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

  1. 如果特定列表项的大小已更改，则需要清除其缓存大小，以便可以重新测量它。您可以通过调用clear(index)来做到这一点CellMeasurerCache。（传递已index更改的行的。）

  2. 接下来，您需要List告知其大小信息需要重新计算。您可以通过致电进行操作recomputeRowHeights(index)。（传递已index更改的行的。）

有关类似于您所描述内容的示例，请查看我使用react-

virtualized构建的类似Twitter的示例应用程序。您可以在此处查看源代码。

以上是 通过反应虚拟化和新的CellMeasurer实现动态行高 的全部内容， 来源链接： utcz.com/qa/418771.html

回到顶部