当前位置：首页 > React

react 如何分页

2026-02-11 12:25:20React

分页实现方法

在React中实现分页功能通常需要结合状态管理和UI组件。以下是几种常见的方法：

使用useState管理分页状态

import { useState } from 'react';

function PaginatedList({ items }) {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  const totalPages = Math.ceil(items.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const currentItems = items.slice(startIndex, startIndex + itemsPerPage);

  return (
    <div>
      {currentItems.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <div>
        {Array.from({ length: totalPages }, (_, i) => (
          <button 
            key={i + 1}
            onClick={() => setCurrentPage(i + 1)}
            disabled={currentPage === i + 1}
          >
            {i + 1}
          </button>
        ))}
      </div>
    </div>
  );
}

使用第三方分页组件

React有许多优秀的分页组件库，如react-paginate：

import ReactPaginate from 'react-paginate';

function PaginatedComponent({ data }) {
  const [currentPage, setCurrentPage] = useState(0);
  const perPage = 5;
  const pageCount = Math.ceil(data.length / perPage);
  const offset = currentPage * perPage;

  const handlePageClick = ({ selected }) => {
    setCurrentPage(selected);
  };

  return (
    <div>
      {data.slice(offset, offset + perPage).map(item => (
        <div key={item.id}>{item.content}</div>
      ))}
      <ReactPaginate
        previousLabel={'previous'}
        nextLabel={'next'}
        breakLabel={'...'}
        pageCount={pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={handlePageClick}
        containerClassName={'pagination'}
        activeClassName={'active'}
      />
    </div>
  );
}

服务器端分页

当数据量很大时，建议实现服务器端分页：

import { useState, useEffect } from 'react';
import axios from 'axios';

function ServerPagination() {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const itemsPerPage = 10;

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(
        `/api/items?page=${currentPage}&limit=${itemsPerPage}`
      );
      setData(response.data.items);
      setTotalPages(response.data.totalPages);
    };
    fetchData();
  }, [currentPage]);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      <div>
        {Array.from({ length: totalPages }, (_, i) => (
          <button
            key={i + 1}
            onClick={() => setCurrentPage(i + 1)}
          >
            {i + 1}
          </button>
        ))}
      </div>
    </div>
  );
}

分页样式优化

可以添加CSS样式增强分页组件的视觉效果：

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
}

.pagination li {
  margin: 0 5px;
}

.pagination li a {
  padding: 8px 16px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.pagination li.active a {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination li.disabled a {
  color: #ddd;
  cursor: not-allowed;
}