React中数组映射项的分页实现方案咨询

核心思路 #

不用手动分割数组或逐个绑定点击事件，通过状态管理+动态计算实现全自动化：

• 用useState维护当前页码，通过页码动态计算当前页展示的数据
• 根据总元素数和每页容量自动生成页码按钮列表，统一绑定点击处理函数
• 用CSS Grid实现固定2行5列的元素布局

完整代码示例 #

import { useState } from 'react';

// 模拟40个元素的数据源
const rawItems = Array.from({ length: 40 }, (_, idx) => `内容项 ${idx + 1}`);
const PAGE_CAPACITY = 10; // 每页展示10个元素

const PaginationGridDemo = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = Math.ceil(rawItems.length / PAGE_CAPACITY);

  // 计算当前页需展示的数据（用slice避免修改原数组）
  const currentPageItems = rawItems.slice(
    (currentPage - 1) * PAGE_CAPACITY,
    currentPage * PAGE_CAPACITY
  );

  // 统一的页码切换处理函数
  const switchPage = (targetPage) => {
    if (targetPage >= 1 && targetPage <= totalPages) {
      setCurrentPage(targetPage);
    }
  };

  // 自动生成页码按钮数组
  const pageBtnList = Array.from({ length: totalPages }, (_, idx) => idx + 1);

  return (
    <div className="demo-container">
      {/* 元素展示区 - Grid布局 */}
      <div className="items-grid">
        {currentPageItems.map((item, idx) => (
          <div key={idx} className="item-card">
            {item}
          </div>
        ))}
      </div>

      {/* 页码控制区 */}
      <div className="pagination-bar">
        {pageBtnList.map(pageNum => (
          <button
            key={pageNum}
            onClick={() => switchPage(pageNum)}
            className={`page-btn ${currentPage === pageNum ? 'active' : ''}`}
          >
            {pageNum}
          </button>
        ))}
      </div>
    </div>
  );
};

export default PaginationGridDemo;

CSS 样式实现 #

.demo-container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 固定5列 */
  grid-template-rows: repeat(2, auto); /* 固定2行 */
  gap: 1rem;
  margin-bottom: 2rem;
}

.item-card {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-align: center;
}

.pagination-bar {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.page-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.page-btn.active {
  background-color: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

关键细节说明 #

1. 避免修改原数组：用slice替代splice，slice返回新数组，不会破坏原始数据源，符合React的不可变数据原则
2. 自动生成页码：通过Array.from根据总页数动态生成页码数组，无需手动编写每个按钮
3. 统一事件处理：所有页码按钮复用同一个switchPage函数，仅需传递目标页码参数，无需逐个绑定事件
4. Grid布局适配：通过repeat(5,1fr)和repeat(2,auto)精准控制行列数，刚好容纳10个元素

内容的提问来源于stack exchange，提问作者user39483893