如何用react做分页

使用React实现分页功能

分页功能通常需要结合前端组件和后端API共同实现。以下是几种常见的实现方法：

基础分页组件实现

创建一个基础的分页组件，接收当前页码、总页数和回调函数作为props：

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

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

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

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

结合API数据获取

在父组件中管理分页状态并获取数据：

function DataList() {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`/api/data?page=${currentPage}`);
      const { items, totalPages } = await response.json();
      setData(items);
      setTotalPages(totalPages);
    }

    fetchData();
  }, [currentPage]);

  return (
    <div>
      {/* 渲染数据列表 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}

      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

高级分页优化

对于大量数据的分页，可以考虑以下优化：

function AdvancedPagination({ currentPage, totalPages, onPageChange }) {
  const getVisiblePages = () => {
    const visiblePages = [];
    const maxVisible = 5;

    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
    let end = Math.min(totalPages, start + maxVisible - 1);

    if (end - start + 1 < maxVisible) {
      start = Math.max(1, end - maxVisible + 1);
    }

    for (let i = start; i <= end; i++) {
      visiblePages.push(i);
    }

    return visiblePages;
  };

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

      <button 
        disabled={currentPage === 1}
        onClick={() => onPageChange(currentPage - 1)}
      >
        上一页
      </button>

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

      <button
        disabled={currentPage === totalPages}
        onClick={() => onPageChange(currentPage + 1)}
      >
        下一页
      </button>

      <button 
        disabled={currentPage === totalPages}
        onClick={() => onPageChange(totalPages)}
      >
        末页
      </button>
    </div>
  );
}

使用第三方库

对于更复杂的需求，可以考虑使用现成的分页库：

import ReactPaginate from 'react-paginate';

function LibraryPagination({ pageCount, onPageChange }) {
  return (
    <ReactPaginate
      pageCount={pageCount}
      pageRangeDisplayed={5}
      marginPagesDisplayed={2}
      onPageChange={onPageChange}
      containerClassName="pagination"
      activeClassName="active"
    />
  );
}

样式处理

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

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

.pagination button {
  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;
}

这些方法可以根据实际项目需求进行组合和调整，实现适合不同场景的分页功能。