如何动态更改 div.ReactVirtualized__Masonry__innerScrollContainer 的高度

Question

我正在使用 React-virtualized 包，Masonry 组件。

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

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

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

我正在使用：

react@16.4.1

反应虚拟化@9.18.5

redux@3.7.2

此 div 是 <Masonry> 组件的子组件，我不知道如何通过回调连接到它并告诉它在列表项计数更改时进行更新。

有人能告诉我如何在过滤后列表变小时更改此 div 的高度吗？

Answer 1

当您将列表从 50 项筛选为 5 项时，您还需要清除 CellMeasurerCache、重置使用 createMasonryCellPositioner 创建的 cellPositioner，以及 clearCellPositions 在你的 Masonry ref (Official CodeSandbox example).

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