如何使用反应在材料ui分页中循环列表项答案

【问题标题】：How to loop through list items in material ui pagination using react如何使用反应在材料ui分页中循环列表项
【发布时间】：2020-05-21 04:45:04
【问题描述】：

我想遍历列表数据并渲染分页... 以及如何在 material-ui-pagination 中限制每页的项目。

【问题讨论】：

你能贴出代码sn-p吗？
我有 30 个项目的列表，需要在 pageChange 上循环遍历这些项目...我需要使用什么道具或如何映射。
检查这个线程：material-ui.com/components/pagination" ) ...希望这在某种程度上有所帮助。

标签： reactjs pagination material-ui

【解决方案1】：

当我开始使用 material-ui 时，我也遇到了实现分页的问题。实际上，您可以使用 material-ui 的 pagination 组件来实现您提到的功能以及 map() funtion 来循环您的列表。

您可以使用类似...的方式处理您在每个页面上显示的列表项

 yourList.subarray(((pageNumber - 1)*(numberOfItemsYouWantPerPage)), ((pageNumber)*(numberOfItemsYouWantPerPage)))

查看我创建的演示以获得更清晰的信息：Pagination demo.

【讨论】：

那个演示非常有用。谢谢！
谢谢@CosetteN :)

【解决方案2】：

使用https://material-ui.com/api/pagination/ 作为material-ui-pagination 道具的参考。

所以基本上这个组件所做的就是为你创建一个分页系统，它不管理任何数据。它可以改变页码状态（从 1 到 2 等等）。它需要传递一个 page prop 才能知道要显示什么，因此这取决于您是否传递此页面组件，并且您必须在页码更改时对其进行更新。您可以做什么来显示您想要的内容是创建一个 Page（接收数据）组件，您可以根据它所在的页面更新数据。您可以通过一些计算来计算页数和列表数据的数量。

【讨论】：