当前位置：首页 > React

react怎么实现分页

2026-01-26 20:22:12React

实现分页的基本思路

在React中实现分页通常需要结合状态管理、数据分割和UI组件。核心逻辑包括计算总页数、当前页数据切片以及页码切换功能。

分页数据计算

假设原始数据为数组形式，需定义每页显示数量（如itemsPerPage）和当前页码（如currentPage）：

const paginatedData = originalData.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage
);

总页数通过数据总量除以每页数量向上取整：

react怎么实现分页

const totalPages = Math.ceil(originalData.length / itemsPerPage);

状态管理示例

使用React的useState管理分页状态：

const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;

// 分页切换函数
const handlePageChange = (pageNumber) => {
  setCurrentPage(pageNumber);
};

UI组件实现

常见分页器可采用按钮组形式，动态生成页码按钮：

react怎么实现分页

<div className="pagination">
  {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
    <button
      key={page}
      onClick={() => handlePageChange(page)}
      disabled={page === currentPage}
    >
      {page}
    </button>
  ))}
</div>

完整组件示例

function Pagination({ data, itemsPerPage }) {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = Math.ceil(data.length / itemsPerPage);

  const paginatedData = data.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div>
      {/* 渲染分页数据 */}
      <ul>
        {paginatedData.map((item) => (
          <li key={item.id}>{item.content}</li>
        ))}
      </ul>

      {/* 分页控制器 */}
      <div className="pagination">
        <button 
          onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
          disabled={currentPage === 1}
        >
          Previous
        </button>

        {Array.from({ length: totalPages }, (_, i) => (
          <button
            key={i + 1}
            onClick={() => setCurrentPage(i + 1)}
            disabled={currentPage === i + 1}
          >
            {i + 1}
          </button>
        ))}

        <button
          onClick={() => setCurrentPage(p => Math.min(p + 1, totalPages))}
          disabled={currentPage === totalPages}
        >
          Next
        </button>
      </div>
    </div>
  );
}