React - 无限滚动 - 具有动态高度的子元素

Question

我正在使用来自 (https://github.com/seatgeek/react-infinite) 的 react-infinite，以便在用户滚动时加载数据。

对我来说问题是子元素（在容器内），它们的高度是动态的。

这是html的结构：

<Infinite class="container" containerHeight={ContainerHeight} elementHeight={rowHieght}>
    <div class="child"> </div>
    <div class="child"> </div>
    ..
</Infinite>

所以当我通过无限时，我会动态计算 rowHeight 和 containerHeight。

问题是孩子可以有不同的身高（意思是1个孩子可以有100的高度，白色的第二个可以有300）。

这使得无限滚动有时会卡住。

这是无限滚动的可能场景吗？

Answer 1

document，可以这样设置：

<Infinite containerHeight={200} elementHeight={[111, 252, 143]}>
    <div className="111-px"/>
    <div className="252-px"/>
    <div className="143-px"/>
</Infinite>