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

Question

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

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

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

因此，我的五个项目下方和页面页脚上方有4500px的空白。这种多余的空格会带来糟糕的用户体验。

我正在使用：

react@16.4.1

react-virtualized@9.18.5

redux@3.7.2

该div是<Masonry>组件的子组件，我看不到如何通过回调将其挂钩，并告诉它在列表项计数更改时进行更新。

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

Answer 1

当您将列表从50个项目过滤到5个项目时，还需要清除CellMeasurerCache，重置使用cellPositioner创建的createMasonryCellPositioner，并在clearCellPositions您的砌体ref（Official CodeSandbox example）。

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