具有反應虛擬化和新 CellMeasurer 的動態行高

Question

我正在使用帶有 Autosizer、List 和 CellMeasurer 組件的 react-virualized 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();
  }
}

Answer 1

當列表數據發生變化時，我需要更新行高。 當前的 CellMeasurer 文檔似乎沒有關於新公共方法的任何信息。

誠然，關於新CellMeasurer的文檔可以改進。 但是，在這種情況下，您需要做兩件事來響應行數據/大小的變化：

1. 如果特定列表項已更改大小，則您需要清除其緩存大小，以便可以重新測量。 您可以通過在CellMeasurerCache上調用clear(index)來CellMeasurerCache 。 （傳遞更改的行的index 。）
2. 接下來，您需要讓List知道需要重新計算其大小信息。 您可以通過調用recomputeRowHeights(index)完成此操作。 （傳遞更改的行的index 。）

有關類似於您所描述的內容的示例，請查看我使用 react-virtualized 構建的類似 Twitter 的應用程序示例。 你可以在這里看到源代碼。

Answer 2

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

這對我有幫助！ :)