React中实现动态分页卡片列表教程

// Person.jsx
const Person = ({ name, exp, post, img }) => {
  return (
    <div className="person_wrapper">
      <div className="person_img">
        <img src={img} alt={name} />
      </div>
      <div className="person_text">
        <h2 className="person_name"> {name} </h2>
        <p className="person_post"> {post} </p>
        <p className="person_exp"> {exp} </p>
      </div>
    </div>
  );
};

export default Person;

// helpers/personList.js
const personArr = [
  {
    img: 'sdfs',
    name: '张三',
    post: '高级前端工程师',
    exp: '工作经验5年',
  },
  {
    img: 'sdf',
    name: '李四',
    post: '后端开发工程师',
    exp: '工作经验3年',
  },
  {
    img: 'sgds',
    name: '王五',
    post: 'UI/UX设计师',
    exp: '工作经验2年',
  },
  {
    img: 'fdhdf',
    name: '赵六',
    post: '项目经理',
    exp: '工作经验8年',
  },
  {
    img: 'sdfs',
    name: '钱七',
    post: '数据分析师',
    exp: '工作经验4年',
  },
  {
    img: 'sdf',
    name: '孙八',
    post: '测试工程师',
    exp: '工作经验6年',
  },
  // ... 更多数据
];

export { personArr };

// PersonList.jsx
import React, { useState } from 'react'; // 引入 useState
import Person from '../person/Person';
import './personList.css'; // 假设有相关的CSS样式
import { personArr } from '../helpers/personList';

const PersonList = () => {
  // 1. 定义状态：当前页码，初始值为1
  const [page, setPage] = useState(1);
  // 2. 定义常量：每页显示的卡片数量
  const pageSize = 3;

  // 3. 计算当前页的数据切片
  // slice(startIndex, endIndex) 不包含 endIndex
  // startIndex: (page - 1) * pageSize
  // endIndex: pageSize * page
  const startIndex = (page - 1) * pageSize;
  const endIndex = pageSize * page;
  const currentPageData = personArr.slice(startIndex, endIndex);

  // 4. 计算总页数
  const totalPages = Math.ceil(personArr.length / pageSize);

  return (
    <div className="list_wrapper">
      {/* 渲染当前页的卡片 */}
      {currentPageData.map((el, i) => {
        // 注意：在实际项目中，如果数据项有唯一ID，应使用ID作为key，而不是索引i
        return (
          <Person
            key={`${el.name}-${i}`} // 更好的key策略
            name={el.name}
            post={el.post}
            img={el.img}
            exp={el.exp}
          />
        );
      })}

      {/* 分页导航按钮 */}
      <div className="pagination_controls">
        <button
          // 当当前页码小于等于1时，禁用“后退”按钮
          disabled={page <= 1}
          onClick={() => setPage((prev) => prev - 1)}
        >
          后退
        </button>
        <button
          // 当当前页码大于等于总页数时，禁用“前进”按钮
          disabled={page >= totalPages}
          onClick={() => setPage((prev) => prev + 1)}
        >
          前进
        </button>
      </div>
    </div>
  );
};

export default PersonList;

/* personList.css */
.list_wrapper {
  display: flex; /* 使卡片横向排列 */
  flex-wrap: nowrap; /* 不换行，保持单行 */
  overflow-x: hidden; /* 隐藏超出容器的卡片，配合JS分页 */
  gap: 20px; /* 卡片之间的间距 */
  justify-content: flex-start; /* 左对齐 */
  align-items: flex-start;
  width: 100%; /* 或固定宽度 */
  box-sizing: border-box;
  padding: 20px;
}

.person_wrapper {
  flex: 0 0 calc(33.333% - 14px); /* 每行显示3张卡片，减去间距 */
  max-width: calc(33.333% - 14px); /* 确保宽度 */
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
  /* 其他样式 */
}

.pagination_controls {
  margin-top: 20px;
  text-align: center;
}

.pagination_controls button {
  padding: 10px 20px;
  margin: 0 10px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

.pagination_controls button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}