react分页功能实现

实现React分页功能的方法

分页组件的基本结构

创建一个独立的Pagination组件，接收当前页码、总页数和回调函数作为props。组件内部渲染页码按钮，并处理点击事件。

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

      {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active' : ''}
        >
          {page}
        </button>
      ))}

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

数据分页逻辑

在父组件中管理数据的分页逻辑，通常使用useState来跟踪当前页码。

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

  const totalPages = Math.ceil(data.length / itemsPerPage);
  const paginatedData = data.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

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

      {/* 分页组件 */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
    </div>
  );
}

优化分页显示

对于大量页码的情况，可以限制显示的页码数量，避免UI混乱。

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

  start = Math.max(1, end - maxVisible + 1);

  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

// 在Pagination组件中使用
{getVisiblePages(currentPage, totalPages).map(page => (
  <button
    key={page}
    onClick={() => onPageChange(page)}
    className={currentPage === page ? 'active' : ''}
  >
    {page}
  </button>
))}

与API集成

当数据来自API时，可以在分页变化时触发新的数据请求。

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

  useEffect(() => {
    fetch(`/api/data?page=${currentPage}`)
      .then(res => res.json())
      .then(({ items, total }) => {
        setData(items);
        setTotalPages(Math.ceil(total / 10));
      });
  }, [currentPage]);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}

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

样式处理

添加基本CSS样式增强分页组件的视觉效果。

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

.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;
}