如何使用react在材料用户界面分页中遍历列表项

Question

我想遍历列表数据并进行分页... 以及如何限制Material-UI分页中每页的项目。

Answer 1

当我从Material-ui开始时，我还面临实现分页的问题。实际上，您可以将material-ui的pagination组件用于您提到的功能以及map() funtion来遍历列表。

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

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

为更加清晰起见，请查看我创建的演示：Pagination demo.

Answer 2

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

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