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

// Person.jsx const Person = ({ name, exp, post, img }) => {   return (     <div className="person_wrapper">       <div className="person_img">         @@##@@       </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; }