如何添加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
}