React，分页：基于列表高度的每页动态项目数

Question

我想要一个<ul> 列表，当它超过窗口高度的 50% 时自动分页（滚动条永远不会出现）。也就是说，每当滚动条由于列表高度超过窗口高度而正常出现时，它应该在那个点动态分页，而不是根据有多少渲染的<li> 项目实际上能够适应分配的屏幕空间。如果某些更改导致或多或少的<li> 项目能够适应（例如，用户更改字体放大倍数），则会重新计算分页并自动重新呈现。每个<li> 项可能有不同的高度，具体取决于其内容。

谁能提供一个图书馆或玩具例子来说明如何做到这一点？

Answer 1

分页需要您自己为此编写代码，因为您的代码需要经过定制才能有效地使用您的 API。但是，有一些非常有趣的库可以动态高效地呈现列表，例如：

React Infinite

React Infinite Scroller