React Virtualized - 以全高呈现表以显示所有行

Question

根据 react-virtualized 文档，“AutoSizer 组件装饰 React 元素并自动管理宽度和高度属性，以便装饰元素填充可用空间”。

建议通常是在 DOM 中的所有父元素中添加height: 100%; 或flex: 1; 以呈现表格的全高。

如果其中一个元素，例如一个绝对定位的整页覆盖容器，有height: 100vh; overflow: scroll; ?

在这种情况下，Table 的父级高度为 100vh，但如果子级的高度大于 100vh，则允许溢出。

假设我们的表格有许多不同高度的行，渲染时超过 100vh。 Autosizer 将返回一个最大等于 100vh 的像素高度，这意味着我们表中的最后一行将被截断，因为 AutoSizer 不会拉伸其父级高度来渲染所有行。

我目前的解决方法是使用 <CellMeasurer /> 和 CellMeasurerCache() 手动确定来自 this.cache; // (component instance of CellMeasurerCache) 的表格高度，使用私有属性，例如在我的表格组件中：

  componentDidUpdate = () => {
    const { tableHeight } = this.state;

    const tableRowHeights = Object.values(this.cache._rowHeightCache);
    const newRowsHeight = tableRowHeights.reduce(
      (height, nextRowHeight) => height + nextRowHeight,
      0
    );

    if (tableHeight !== newRowsHeight) {
      this.setState({ tableHeight: newRowsHeight });
    }
  }

如果不从 CellMeasurerCache() 实例访问私有属性，是否没有办法使用 react-virtualized 组件和 API 来实现这一点？

Answer 1

如果这些元素之一，例如一个绝对定位的整页覆盖容器，高度：100vh；溢出：滚动； ?

在这种情况下，Table 的父级高度为 100vh，但如果子级的高度大于 100vh，则允许溢出。

我认为这（溢出行为）在反应虚拟化的情况下没有意义。在大多数情况下——除非你将WindowScroller 用于 Facebook/Twitter 之类的布局——react-virtualized 组件应该管理它们自己的滚动。

因此，在这种情况下，如果 100vh 高度可用，您会希望 RV 准确地填充该数量，并且 - 如果内容多于该区域的容量 - （如果您首先使用 RV，这很可能place)- 它将在自身内部设置滚动样式。

另一方面，如果你告诉一个 react-virtualized 组件它的高度是numRows * rowHeight 那么它会渲染所有东西，并且完全违背了窗口的目的。 :)