React 虛擬化動態高度列表呈現最初堆疊的所有內容

Question

我正在嘗試使用 react-virtualized 來虛擬化一個列表，其中某些行具有不同的高度，並且該列表占用了父項中的所有空間。 我正在嘗試使用 CellMeasurer、AutoSizer 和 List 組件來實現這一點。

我的包版本如下：

反應虛擬化：“^9.21.1”

反應：“16.8.6”

反應域：“16.8.6”

import React, { PureComponent } from 'react';
import 'react-virtualized/styles.css';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import { CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';


class Table extends PureComponent {

  rowRenderer = ({ index, style, key }) => {
    return (
      <CellMeasurer
        cache={this.cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
      >
        <div style={style} key={key}>
          content
        </div>
      </CellMeasurer>
    );
  }

  cache = new CellMeasurerCache({
    defaultHeight: 24,
    fixedWidth: true,
  });

  renderAutoSizerContent = () => {
    return this.RenderList;
  }

  RenderList = ({ height, width }) => {
    return (<List
      items={this.props.items}
      width={width}
      height={height}
      rowCount={this.props.items.length}
      rowHeight={this.cache.rowHeight}
      rowRenderer={this.rowRenderer}
      deferredMeasurementCache={this.cache}
    />
    );
  }


  render() {
    return (
      <AutoSizer
        items={ this.props.items}
      >
        {this.renderAutoSizerContent()}
      </AutoSizer>
    );
  }
}

export default Table;

初始渲染后，一切看起來像這樣。 出於某種原因，數組中每個元素的 top 屬性都是 0：

滾動或觸發重新渲染后，項目似乎獲得了它們的 top 屬性和以下渲染。 在實際代碼中，我的一些元素具有高度差異，但高度似乎默認為我給 CellMeasurerCache 構造函數的 defaultHeight。

如何使初始渲染具有每個元素的 top 屬性，以及如何正確計算高度？ 我在這里顯示的代碼中做錯了什么？

Answer 1

在rowRenderer組件中，您為CellMeasurer提供了parent道具，但 parent 未定義。
您從 rowRenderer 獲取父項，如文檔中所述： https : //github.com/bvaughn/react-virtualized/blob/master/docs/List.md#rowrenderer

---

所以你的 rowRenderer 組件應該是：

  rowRenderer = ({ index, style, key, parent }) => {
      return (
        <CellMeasurer
            cache={this.cache}
            columnIndex={0}
            key={key}
            parent={parent}
            rowIndex={index}
        >
           <div style={style} key={key}>
              {items[index]}
          </div>
        </CellMeasurer>
       );
  }

您還可以使用工作示例檢查此代碼沙箱： https : //codesandbox.io/s/material-demo-yw1k8?fontsize=14