Javascript 使用react虚拟化和新CellMeasurer的动态行高

我将react Virtualized 9与Autosizer、List和CellMeasurer组件一起使用。当列表数据更改时，我需要更新行高度。看来，由于版本9中支持React Fiber的更改，CellMeasurer的唯一公共方法现在是measure（）。大多数示例都使用前面的resetMeasurementForRow（）方法。当前版本似乎没有关于新公共方法的任何信息。我不确定我是否忽略了什么，但我们非常感谢您的帮助

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

const cache=新的CellMeasureCache({
默认高度：60，
固定宽度：true
});
{（{宽度，高度}）=>(
{this.list=element；}}
行计数={list.length}
rowHeight={cache.rowHeight}
rowRenderer={this.rowRenderer}
宽度={width}
/>
)}
行渲染器（{index，key，parent，style}）{
返回(
{this.cellmasurer=element；}}
行索引={index}
>
{（{measure}）=>{
this.measure=measure.bind（this）；
返回；
}}
);
}
组件将接收道具（下一步）{
//数据发生了一些变化，我可能会在这里使用Immutable.js
if（this.props.list.length！==nextrops.list.length）{
这个。度量（）；
this.list.recomputeroweights（）；
}
}

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

诚然，关于新的

CellMeasurer

，文档可以改进。在这种情况下，您需要做两件事来响应行数据/大小的变化：

如果特定列表项的大小已更改，则需要清除其缓存大小，以便重新测量。您可以通过调用

cellmasurercache

上的

clear（index）

来完成此操作。（传递已更改行的

索引

。）

接下来，您需要让

List

知道需要重新计算其大小信息。你可以打电话来。（传递已更改行的

索引

。）

有关与您描述的内容类似的示例，请查看我使用react virtualized构建的示例。你可以看到来源

---

这对我有帮助！：）

你有关于如何使用clear（index）的演示代码吗？@bvaughn你救了我！在我看到这里之前，我一直被困在这里，我必须在重新计算之前清除缓存。非常感谢您能提供

this.measure（）

函数内容吗？我试图实现动态行高，但我的列表项行完全不同。请详细说明您的答案。

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