如何动态更改 div.React Virtualized _Masonry__inner ScrollContainer 的高度

Question

我正在使用 React 虚拟化包，Masonry 组件。

我的问题在于<div class="ReactVirtualized__Masonry__innerScrollContainer"> 元素。

当我加载一个包含 50 个项目的列表，然后将该列表过滤到五个项目时，div 的高度根本不会缩小或改变。例如，有 50 个项目时，元素设置为 <div class="ReactVirtualized__Masonry__innerScrollContainer" style="... height='5000px' ...">，当列表过滤为 5 个项目时，此 div 中的高度不会缩小到 500 像素。

因此，我的五个项目下方和页脚上方有 4500 像素的空白区域。这种额外的空白会导致糟糕的用户体验。

我正在使用：

react@16.4.1

react-virtualized@9.18.5

redux@3.7.2

这个 div 是 <Masonry> 组件的子组件，我不知道如何通过回调连接到它并告诉它在列表项计数发生变化时更新。

有人可以告诉我如何在过滤后列表变小时改变这个div的高度吗？

Answer 1

当您将列表从 50 项过滤到 5 项时，您还需要清除您的 CellMeasurerCache，重置您使用 createMasonryCellPositioner 创建的 cellPositioner，以及在您的 Masonry 上创建的 clearCellPositions ref (@987654322 @)。

cache.clearAll();
cellPositioner.reset(cellPositionerConfig);
this.masonryRef.clearCellPositions();