如何添加antd分页组件？

Question

我想将 Antd 分页（文档）添加到“ArticlesList”组件中的项目，但还不知道 - 我应该将什么传递给分页组件onChange = {????}尝试制作不同的变体，但它不起作用。 任何帮助或建议如何做到这一点？

你可以在这里看到代码： codesandbox

Answer 1

您应该传递您的总文章长度、当前页面和 onChnage 函数获取两个参数，即页码和页面大小，即您希望在页面或组件中显示的文章数量。

通过 onChange 你获取你的下一个列表。

const onChange = (page, pageSize) => {
  fetch(`yourApi/page=${page}&pageSize=${pageSize})
}

<Pagination
  total={totalArticles}
  current={currentPage}
  onChange={(page, pageSize) => onChange(page, pageSize)}
/>

模拟数据：

{
  articles: [],
  totalArticles: 60,
  page: 1,
  pageSize: 10, // Its up to you
}