根据 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 来完成此操作?实例?
最佳答案
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
然后它会渲染所有东西,并且完全打败窗口化的目的。 :)
关于react-virtualized - React Virtualized - 以全高渲染表以显示所有行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48916097/