当前位置：首页 > React

react如何分

2026-03-30 17:33:32React

分页实现方法

在React中实现分页功能可以通过多种方式完成，以下介绍几种常见的方法：

使用状态管理分页数据

通过React的useState钩子管理当前页码和每页显示的数据量，结合数组的slice方法截取当前页数据：

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

// 计算当前页数据
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

// 渲染分页按钮
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
  pageNumbers.push(
    <button key={i} onClick={() => setCurrentPage(i)}>
      {i}
    </button>
  );
}

使用第三方分页组件

React生态系统中有许多成熟的分页组件可供选择，如react-paginate：

import ReactPaginate from 'react-paginate';

function PaginatedItems({ itemsPerPage, data }) {
  const [itemOffset, setItemOffset] = useState(0);
  const endOffset = itemOffset + itemsPerPage;
  const currentItems = data.slice(itemOffset, endOffset);
  const pageCount = Math.ceil(data.length / itemsPerPage);

  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % data.length;
    setItemOffset(newOffset);
  };

  return (
    <>
      <Items currentItems={currentItems} />
      <ReactPaginate
        breakLabel="..."
        nextLabel="next >"
        onPageChange={handlePageClick}
        pageRangeDisplayed={5}
        pageCount={pageCount}
        previousLabel="< previous"
        renderOnZeroPageCount={null}
      />
    </>
  );
}

服务器端分页

对于大数据量场景，建议实现服务器端分页，通过API请求获取特定页面的数据：

const fetchPageData = async (pageNumber) => {
  const response = await fetch(`/api/data?page=${pageNumber}&size=10`);
  const result = await response.json();
  setData(result.items);
  setTotalPages(result.totalPages);
};

// 在分页按钮点击时调用
const handlePageChange = (page) => {
  fetchPageData(page);
};

分页组件设计要点