当前位置：首页 > React

react如何实现分页

2026-02-11 19:18:09React

实现分页的基本思路

在React中实现分页通常需要结合状态管理、数据分割和UI组件。核心逻辑包括计算总页数、当前页数据切片以及页码切换功能。

数据准备与状态管理

初始化分页相关状态：

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

计算分页元数据：

const totalPages = Math.ceil(totalItems / itemsPerPage);
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

分页组件实现

创建可交互的分页控制器组件：

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const pageNumbers = [];

  for (let i = 1; i <= totalPages; i++) {
    pageNumbers.push(i);
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map(number => (
          <li key={number} className={currentPage === number ? 'active' : null}>
            <button onClick={() => onPageChange(number)}>
              {number}
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
};

API集成方案

对于从后端API获取分页数据的情况：

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch(`/api/items?page=${currentPage}&limit=${itemsPerPage}`);
    const { data, total } = await response.json();
    setData(data);
    setTotalItems(total);
  };
  fetchData();
}, [currentPage, itemsPerPage]);

样式优化建议

添加基础CSS样式增强用户体验：

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

.pagination li {
  margin: 0 5px;
}

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

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

高级功能扩展

实现动态每页显示数量控制：

const [itemsPerPage, setItemsPerPage] = useState(10);

const handleItemsPerPageChange = (e) => {
  setItemsPerPage(Number(e.target.value));
  setCurrentPage(1); // 重置到第一页
};

// 在渲染部分添加选择器
<select value={itemsPerPage} onChange={handleItemsPerPageChange}>
  <option value="5">5 per page</option>
  <option value="10">10 per page</option>
  <option value="20">20 per page</option>
</select>

react如何实现分页