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

1. 概述与核心概念

在web开发中，当需要展示大量结构化数据时，一次性加载并显示所有内容可能会导致页面性能下降和用户体验不佳。此时，分页（pagination）成为一种常见的解决方案。它允许我们将数据分成若干页，每次只显示一页内容，并通过导航控件（如“上一页”、“下一页”按钮）让用户在不同页之间切换。

本教程将演示如何在React组件中实现一个卡片式列表的分页功能，具体涉及以下核心概念：

• 状态管理（State Management）：使用React的useState Hook来追踪当前页码。
• 数据切片（Data Slicing）：利用JavaScript数组的slice()方法，根据当前页码和每页显示数量动态截取所需的数据子集。
• 条件渲染（Conditional Rendering）：根据页码和数据总数，动态控制导航按钮的可用状态。

2. 组件结构与数据准备

我们假设有两个主要的React组件：PersonList（负责列表的整体逻辑和分页）和 Person（负责单张卡片的展示）。数据源是一个包含人物信息的数组。

2.1 Person 组件

Person 组件是一个纯粹的展示型组件，它接收人物的姓名、职位、经验和图片URL作为属性，并将其渲染为一张卡片。

// Person.jsx
const Person = ({ name, exp, post, img }) => {
  return (
    

      

        @@##@@
      
      

        
 {name} 
        
 {post} 
        
 {exp} 
      
    
  );
};

export default Person;

2.2 数据源 personArr

数据源是一个简单的JavaScript数组，其中每个对象代表一个人物。

// 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 };

3. 实现 PersonList 分页逻辑

PersonList 组件将是实现分页的核心。它需要引入useState Hook来管理当前页码，并根据页码动态渲染Person卡片。

新视窗CMS企业管理程序 5.1

新视窗企业管理系统是一款小巧、实用、利于后续开发的ASP程序。适合大中小型企业的网站建设。1、新闻管理 2、产品管理 3、订单管理 4、广告管理 5、下载管理 6、留言管理 8、单页栏目(如企业简介,资质荣誉)9、人才招聘等等。 新视窗企业管理系统 5.1 更新日志:1、修改产品列表的图片自动缩略，防止图片变形.2、修改后台添加产品分类时，排序ID不写入数据库的错误.3、修改首页企业简介的链接地址

下载

// 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 (
    

      {/* 渲染当前页的卡片 */}
      {currentPageData.map((el, i) => {
        // 注意：在实际项目中，如果数据项有唯一ID，应使用ID作为key，而不是索引i
        return (
          
        );
      })}

      {/* 分页导航按钮 */}
      

         setPage((prev) => prev - 1)}
        >
          后退
        
        = totalPages}
          onClick={() => setPage((prev) => prev + 1)}
        >
          前进
        
      
    
  );
};

export default PersonList;

3.1 代码解析

1. useState(1): 初始化 page 状态变量为 1，表示默认显示第一页。
2. pageSize = 3: 定义每页显示3张卡片。这个值可以根据需求调整，或者通过状态管理使其动态可配置。
3. personArr.slice((page - 1) * pageSize, pageSize * page): 这是实现分页的核心。
   • (page - 1) * pageSize：计算当前页的起始索引。例如，第一页（page=1）从索引0开始，第二页（page=2）从索引3开始。
   • pageSize * page：计算当前页的结束索引（不包含）。例如，第一页（page=1）到索引3（不包含），即索引0、1、2。
   • slice() 方法返回一个新数组，包含从起始索引到结束索引（不含）的元素。
4. Math.ceil(personArr.length / pageSize): 计算总页数。Math.ceil确保即使数据不能被pageSize整除，也能正确地向上取整，保证所有数据都能被访问到。
5. 导航按钮的 disabled 属性:
   • 后退按钮: disabled={page
   • 前进按钮: disabled={page >= totalPages}。当当前页是最后一页时，禁用“前进”按钮，防止用户导航到超出数据范围的页。
6. onClick 事件处理器:
   • setPage((prev) => prev - 1)：点击“后退”按钮时，将页码减1。使用函数式更新（prev => prev - 1）可以确保在多次快速点击时，状态更新是基于最新的状态值。
   • setPage((prev) => prev + 1)：点击“前进”按钮时，将页码加1。

4. 样式（CSS）考虑

虽然JavaScript逻辑实现了分页功能，但要达到“卡片排成一行，宽度显示3张卡片”的视觉效果，还需要适当的CSS样式。这通常涉及Flexbox或Grid布局。

例如，list_wrapper 和 person_wrapper 的CSS可能如下：

/* 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;
}

注意事项：

• overflow-x: hidden; 在 list_wrapper 上是关键，它确保只有当前页的卡片可见。当页码改变时，slice 方法会重新渲染新的卡片集合。
• flex: 0 0 calc(33.333% - 14px); 用于 person_wrapper，确保每行显示3张卡片，并考虑了 gap 或 margin 带来的间距。

5. 总结

通过上述步骤，我们成功地在React中实现了一个动态、可分页的卡片列表。这种方法不仅优化了大型数据集的展示性能，还通过直观的导航按钮提升了用户体验。核心在于利用React的状态管理能力与JavaScript数组的强大操作方法，将复杂的数据展示问题分解为可管理的逻辑单元。在实际开发中，还可以进一步考虑添加键盘导航、页码显示、以及更复杂的动画效果来增强用户交互。