React-virtualized 动态高度列表呈现最初堆叠的所有内容

Posted 2023-02-21

【中文标题】React-virtualized 动态高度列表呈现最初堆叠的所有内容

【英文标题】：React-virtualized dynamic height list renders everything stacked initially

【发布时间】：2019-12-22 15:12:52

【问题描述】：

我正在尝试使用 react-virtualized 来虚拟化一个列表，其中一些行具有不同的高度，并且该列表占用了父级中的所有空间。我正在尝试使用 CellMeasurer、AutoSizer 和 List 组件来完成此操作。

我的包版本如下：

react: "16.8.6"
react-dom: "16.8.6"
react-virtualized: "^9.21.1"

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 属性，以及如何正确计算高度？我在此处显示的代码中做错了什么？

【问题讨论】：

使用代码 sn-p 而不是截图会更容易。

这里有重现问题的完整代码，还是什么意思？

我的意思是可运行代码sn-p

【参考方案1】：

在您的 rowRenderer 组件中，您向 CellMeasurer 提供了 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