Question

根据反应虚拟化文档，＆＃34; AutoSizer组件装饰一个React元素并自动管理宽度和高度属性，以便装饰元素填充可用空间＆＃34;。

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

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

在这种情况下，表的父高为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;溢出：滚动; ？

在这种情况下，表的父高度为100vh，但如果孩子的身高超过100vh，则允许溢出。

我不认为这（溢出行为）在反应虚拟化的情况下是有意义的。在大多数情况下 - 除非您使用WindowScroller作为Facebook / Twitter之类的布局 - 反应 - 虚拟化组件应该管理自己的滚动。

因此，在这种情况下，如果100vh高度可用，您会希望RV准确填充该数量，并且 - 如果有更多内容超出该区域 - （这可能是，如果您在第一个使用RV它会在其内部设置滚动样式。

另一方面，如果你告诉一个反应虚拟化的组件它的高度是numRows * rowHeight那么它将渲染所有东西，并完全打败窗口的目的。：）

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

1 个答案: