react-virtualized - React Virtualized - 以全高渲染表以显示所有行

Question

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

建议通常是加上height: 100%;或 flex: 1;到 DOM 中的所有父元素以呈现表格的完整高度。

如果这些元素之一，例如一个绝对定位的整页覆盖容器，有 height: 100vh; overflow: scroll; ？

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

假设我们的表格有许多高度不同的行，并且在呈现时超过 100vh。 Autosizer 将返回一个以像素为单位的高度，该高度等于 100vh，作为最大值，这意味着我们表中的最后一行将被截断，因为 AutoSizer 不会拉伸(stretch)其父级高度来呈现所有行。

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

  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() 访问私有(private)属性，是否无法使用 react 虚拟化组件和 API 来完成此操作？实例？

Answer 1

What if one of those elements, e.g. an absolutely positioned full page overlay container, has height: 100vh; overflow: scroll; ?

In this case, the Table's parent height is 100vh, but allows overflow if the children have height greater than 100vh.

我认为这种(溢出行为)在 react 虚拟化的情况下没有意义。在大多数情况下——除非你使用 WindowScroller 来实现类似 Facebook/Twitter 的布局——react-virtualized 组件应该管理它们自己的滚动。

因此，在这种情况下，如果 100vh 高度可用，您会希望 RV 正好填充该数量，并且 - 如果内容多于适合该区域的内容 - (这很可能，如果你在第一个使用 RV place)- 它将在其内部设置滚动样式。

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