如何使用React MaterialUI将分页添加到长列表中？

Question

我正在使用react + materialUI来实现列表和过滤器功能。该列表应从Http请求中填充，并且可以包含大量列表项。因此，出于这个原因，我正在研究MaterialUI文档中的分页，但是那里没有明确的实现。我想提供我的列表，并希望分页组件可以打破数据并显示在多个页面上。

这是materialUI组件的链接：https://material-ui.com/components/pagination/

有关如何进行此操作的任何帮助？

Picture of the List view.

编辑：我想将列表项实现为可点击的组件，以便在单击时将其重定向到特定于列表项的仪表板。

更新：我已经使用material-ui分页组件实现了它。工作良好！

演示：https://codesandbox.io/s/material-demo-g0xo5?file=/demo.js

Answer 1

我认为您应该决定在一页上显示多少个项目，并在您的状态下存储页码，然后显示应该在该页面上显示的项目。像yourItemList.subarray(((pageNumber - 1)*(numberOfItemsForPage)), ((pageNumber)*(numberOfItemsForPage) - 1)) 您可以将其与用户界面的分页功能结合使用，应该可以正常工作！

Answer 2

我最近用以下代码段处理了这个问题（考虑到我的示例需要处理一个复杂的对象）：

<Pagination count={data.sub.length%10===0 ? data.sub.length/10 : data.sub.length/10 +1} page={page} onChange={(event,val)=> setPage(val)}  />

在我的示例中，我希望每页渲染10个项目（因此除以10），然后计算是否存在应该使用模和三进制运算符渲染的尾随元素。接下来，提供对当前页面的引用并通过钩子更改当前页面将获得所需的结果。请记住，最相关是在DOM的每个页面上呈现的元素数量。