React组件数据分页与滑动卡片展示教程

const personArr = [   {     img: 'path/to/img1.jpg',     name: '张三',     post: '软件工程师',     exp: '工作经验：5年',   },   {     img: 'path/to/img2.jpg',     name: '李四',     post: '产品经理',     exp: '工作经验：3年',   },   {     img: 'path/to/img3.jpg',     name: '王五',     post: 'ui设计师',     exp: '工作经验：8年',   },   {     img: 'path/to/img4.jpg',     name: '赵六',     post: '数据分析师',     exp: '工作经验：2年',   },   {     img: 'path/to/img5.jpg',     name: '孙七',     post: '项目经理',     exp: '工作经验：10年',   },   {     img: 'path/to/img6.jpg',     name: '周八',     post: '前端开发',     exp: '工作经验：4年',   },   // ... 更多数据 ];  export { personArr };

import React from 'react'; // 即使不使用Hook，最佳实践也应引入React  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;

import React, { useState } from 'react'; // 引入 useState Hook import Person from '../person/Person'; import './personList.css'; // 假设有CSS文件来控制布局 import { personArr } from '../helpers/personList';  const PersonList = () => {   // 1. 定义当前页码状态，初始为第一页   const [page, setPage] = useState(1);   // 2. 定义每页显示的项目数量   const pageSize = 3; // 例如，每页显示3张卡片    // 计算当前页数据的起始索引   const startIndex = (page - 1) * pageSize;   // 计算当前页数据的结束索引（不包含）   const endIndex = pageSize * page;    // 使用 slice() 方法获取当前页的数据   const currentPersons = personArr.slice(startIndex, endIndex);    // 计算总页数，用于判断“前进”按钮是否禁用   const totalPages = math.ceil(personArr.Length / pageSize);    return (     <div className="list_wrapper">       {/* 渲染当前页的人物卡片 */}       {currentPersons.map((el, i) => {         return (           <Person             key={startIndex + 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)}         >           Backward         </button>         <button           // 当当前页码大于等于总页数时，禁用“前进”按钮           disabled={page >= totalPages}           onClick={() => setPage((prev) => prev + 1)}         >           Forward         </button>       </div>     </div>   ); };  export default PersonList;

.list_wrapper {   display: flex; /* 使用Flexbox布局 */   overflow: hidden; /* 隐藏超出容器的部分 */   gap: 20px; /* 卡片之间的间距 */   /* 其他样式，如宽度限制，居中等 */   max-width: 960px; /* 假设每张卡片300px，3张卡片加间距 */   margin: 0 auto;   padding: 20px;   box-sizing: border-box;   flex-wrap: nowrap; /* 不换行，确保卡片在一行 */ }  .person_wrapper {   flex: 0 0 calc(33.33% - 13.33px); /* 3张卡片，减去间距的影响 */   max-width: calc(33.33% - 13.33px);   min-width: 280px; /* 确保卡片不会过小 */   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);   border-radius: 8px;   padding: 15px;   text-align: center;   box-sizing: border-box; }  .pagination_controls {   margin-top: 20px;   text-align: center; }  .pagination_controls button {   padding: 10px 20px;   margin: 0 10px;   border: 1px solid #ccc;   background-color: #f0f0f0;   cursor: pointer;   border-radius: 5px; }  .pagination_controls button:disabled {   background-color: #e0e0e0;   cursor: not-allowed;   opacity: 0.6; }