当前位置：首页 > React

react实现分页功能

2026-01-27 06:47:53React

分页功能实现方法

使用React状态管理分页数据

在React组件中定义状态来存储当前页码和每页显示的数据量。通常使用useState钩子来管理这些状态。

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

计算分页数据

根据当前页码和每页显示数量，计算出当前页应该显示的数据切片。假设有一个数据数组data。

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

渲染分页数据

将计算出的当前页数据渲染到页面中。可以使用map函数遍历currentItems数组。

react实现分页功能

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

创建分页导航组件

构建一个分页导航组件，允许用户切换不同页码。计算总页数并生成页码按钮。

const pageNumbers = [];
for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
  pageNumbers.push(i);
}

return (
  <div>
    {pageNumbers.map(number => (
      <button 
        key={number}
        onClick={() => setCurrentPage(number)}
      >
        {number}
      </button>
    ))}
  </div>
);

添加分页样式和交互

为当前选中的页码添加特殊样式，提高用户体验。可以通过比较当前页码和按钮数字来实现。

react实现分页功能

<button
  className={currentPage === number ? 'active' : ''}
  onClick={() => setCurrentPage(number)}
>
  {number}
</button>

优化分页性能

对于大型数据集，考虑实现虚拟滚动或懒加载技术来优化性能。可以限制显示的页码数量，添加上一页/下一页按钮。

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

<button
  disabled={currentPage === pageNumbers.length}
  onClick={() => setCurrentPage(prev => prev + 1)}
>
  下一页
</button>

完整组件示例

将上述代码整合成一个完整的分页组件示例。

function Pagination({ data, itemsPerPage }) {
  const [currentPage, setCurrentPage] = useState(1);
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
    pageNumbers.push(i);
  }

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

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

        {pageNumbers.map(number => (
          <button
            key={number}
            className={currentPage === number ? 'active' : ''}
            onClick={() => setCurrentPage(number)}
          >
            {number}
          </button>
        ))}

        <button
          disabled={currentPage === pageNumbers.length}
          onClick={() => setCurrentPage(prev => prev + 1)}
        >
          下一页
        </button>
      </div>
    </div>
  );
}