Reactjs 中的分页范围

Question

请我用下一个和上一个按钮对我的数据进行分页。我想说给我看第一页上的前 5 个 (1-5)，但我不清楚该怎么做。

这是我目前拥有的：
任何反馈。

import React, { useState } from 'react'


const Pagination = ({ dataPerPage, totaldata, paginate }) => {
  const [currentPage, setCurrentPage] = useState(0)
  const pageNumbers = []

  const int = Math.ceil(totaldata / dataPerPage)
  if (int === 1) return null

  for (let i = 1; i <= int; i++) {
    pageNumbers.push(i)
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.includes(currentPage - 1) && (
          <a
            onClick={() => {
              setCurrentPage(currentPage - 1)
              paginate(currentPage - 1)
            }}
            href="#"
            className="page-link"
          >
            Prev
          </a>
        )}
        {pageNumbers.map(number => (
          <li key={number} className="page-item">
            <a
              onClick={() => {
                setCurrentPage(number)
                paginate(number)
              }}
              href="#"
              className="page-link"
            >
              {number}
            </a>
          </li>
        ))}

        {pageNumbers.includes(currentPage + 1) && (
          <a
            onClick={() => {
              setCurrentPage(currentPage + 1)
              paginate(currentPage + 1)
            }}
            className="page-link"
            href="#"
          >
            Next
          </a>
        )}
      </ul>
    </nav>
  )
}

export default Pagination;

Answer 1

检查这个包：react-js-pagination

https://www.npmjs.com/package/react-js-pagination