当前位置：首页 > React

react 如何分页

2026-02-25 22:38:57React

分页的实现方法

在React中实现分页功能通常需要结合前端状态管理和API请求。以下是几种常见的实现方式：

客户端分页

当数据量较小时，可以在前端直接进行分页处理：

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

// 假设data是从API获取的完整数据集
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

const paginate = (pageNumber) => setCurrentPage(pageNumber);

服务器端分页

对于大数据集，建议使用服务器端分页：

const [currentPage, setCurrentPage] = useState(1);
const [totalPages, setTotalPages] = useState(0);
const [items, setItems] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`/api/items?page=${currentPage}&limit=10`);
    const { data, total } = await response.json();
    setItems(data);
    setTotalPages(Math.ceil(total / 10));
  };
  fetchData();
}, [currentPage]);

分页组件实现

创建一个可复用的分页组件：

function Pagination({ currentPage, totalPages, onPageChange }) {
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

  return (
    <div className="pagination">
      <button 
        onClick={() => onPageChange(currentPage - 1)} 
        disabled={currentPage === 1}
      >
        Previous
      </button>

      {pages.map(page => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}

      <button 
        onClick={() => onPageChange(currentPage + 1)} 
        disabled={currentPage === totalPages}
      >
        Next
      </button>
    </div>
  );
}

使用现有库

可以考虑使用现成的分页库如react-paginate：

import ReactPaginate from 'react-paginate';

function MyComponent() {
  const handlePageClick = (data) => {
    const selectedPage = data.selected + 1;
    // 更新当前页码或获取新数据
  };

  return (
    <ReactPaginate
      previousLabel={'previous'}
      nextLabel={'next'}
      breakLabel={'...'}
      pageCount={20}
      marginPagesDisplayed={2}
      pageRangeDisplayed={5}
      onPageChange={handlePageClick}
      containerClassName={'pagination'}
      activeClassName={'active'}
    />
  );
}

分页样式优化

为分页组件添加基本CSS样式：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

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

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

性能考虑

对于大数据集，实现无限滚动可能是更好的选择：

const [items, setItems] = useState([]);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);

const fetchMoreData = () => {
  fetch(`/api/items?page=${page}`)
    .then(res => res.json())
    .then(data => {
      setItems([...items, ...data]);
      setPage(page + 1);
      if (data.length === 0) setHasMore(false);
    });
};

// 在滚动监听中使用
window.addEventListener('scroll', () => {
  if (window.innerHeight + document.documentElement.scrollTop === 
      document.documentElement.offsetHeight && hasMore) {
    fetchMoreData();
  }
});

react 如何分页