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

Question

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

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

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

列表视图的图片。

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

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

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

标签： javascriptreactjspaginationmaterial-ui

Answer 1

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