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

Question

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

任何人都可以提供有关如何执行此操作的图书馆或玩具示例吗？

Answer 1

分页将需要您为此编写代码，因为需要对代码进行定制以有效使用API​​。但是，有一些非常有趣的库可以动态高效地呈现列表，例如：

React Infinite

React Infinite Scroller