当前位置：首页 > React

如何用react做分页

2026-02-12 09:49:31React

使用React实现分页功能

在React中实现分页功能通常涉及以下几个关键步骤：数据分片、状态管理和UI渲染。以下是具体实现方法：

数据分片处理

从后端API获取完整数据列表后，需要按每页显示数量分割数据。假设每页显示itemsPerPage条数据：

如何用react做分页

const paginate = (items, currentPage, itemsPerPage) => {
  const startIndex = (currentPage - 1) * itemsPerPage;
  return items.slice(startIndex, startIndex + itemsPerPage);
};

状态管理

使用React的useState管理当前页码和每页显示数量：

如何用react做分页

const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10); // 可调整为动态值
const [totalItems, setTotalItems] = useState(0);

分页UI组件

创建分页导航组件，包含页码按钮和导航控制：

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  return (
    <div className="pagination">
      <button 
        onClick={() => onPageChange(currentPage - 1)} 
        disabled={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 
        onClick={() => onPageChange(currentPage + 1)} 
        disabled={currentPage === totalPages}
      >
        下一页
      </button>
    </div>
  );
};

完整示例集成

将分页逻辑与数据展示结合：

function App() {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  useEffect(() => {
    // 模拟API调用
    fetchData().then(res => {
      setData(res);
    });
  }, []);

  const currentItems = paginate(data, currentPage, itemsPerPage);
  const totalPages = Math.ceil(data.length / itemsPerPage);

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

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