react 列表 react列表模板

本教程详细讲解如何在React应用中为列表实现分页和滑动展示功能。通过利用React的useState Hook管理当前页面码状态，结合JavaScript的Array.prototype.slice()方法动态截取阵列数据，以及配置导航按钮来控制页面的切换，从而将静态显示的关联列表转换为可浏览、每页固定数量的交互构建响应响应列表

在web应用中，显示大量数据时，将所有内容批量渲染到页面上往往会导致性能问题和糟糕的用户体验。特别是对于此类列表此类组件，如果数据量庞大，用户可能需要滚动动很长时间才能浏览完。因此，将静态列表转换为可分页或可滑动的组件消耗变得极其重要。本教程将指导您如何在react中实现一个每页显示固定的数字按钮，并通过交互按钮进行导航的按钮列表。核心原理：状态管理与数据切片

实现按钮列表的分页或滑动展示，其核心在于两个关键技术点：利用React的状态管理来追踪当前显示的“页码”，以及利用JavaScript备份的slice()方法根据当前页码动态地截取需要展示的数据。 它的状态管理(useState)

在React函数中组件中，我们使用useState Hook来管理组件的内部状态。对于分页功能，我们需要维护当前页面码的状态。page：这个状态变量代表当前用户正在查看的页面码。会随着用户点击“前进”或“后退”按钮而改变。pageSize：这个变量定义了每页应该显示多少张对应。在本例中，我们设置为3张对应。通常pageSize是一个固定值，但如果需要用户自定义每页可以显示数量，它也被提升为状态。import React， { useState } from 'react'；// ...其他导入 const PersonList = () =gt； { const [page， setPage] = useState(1)； // 初始化当前页码为第一页 const pageSize = 3； // 初始化当前页码为第一页 const pageSize = 3； //每页显示3张对应 // ...}；登录后复制2. 数据片(Array.prototype.slice())

Array.prototype.slice()方法用于从阵列中提取指定范围的元素，并返回一个新的阵列，而不会修改原阵列。这是实现分页的关键。

slice()方法接受两个参数：startIndex（开始索引，包含）和endIndex（结束索引，不包含）。startIndex的计算：对于第页页，其起始索引为（页 - 1) * pageSize。例如，第一页(page=1)的起始索引为(1-1)3 = 0；第二页(page=2)的起始索引为(2-1)3 = 3。endIndex的计算：结束索引为pageSize * page。例如，第一页的结束索引为31 = 3；第二页的结束索引为32 = 6。

结合map()方法，我们可以这样渲染当前页的数据：// ...{personArr.slice((page - 1) * pageSize， pageSize * page).map((el， i) =gt； { return ( lt；Person key={i} // 注意：在实际项目中，key应使用数据项的唯一ID，而不是 Indexi name={el.name} post={el.post} img={el.img} exp={el.exp} /gt； )；})}// ...登录后复制导航控制：前进与后退按钮

为了让用户能够进行页面切换，我们需要添加“前进”和“后退”按钮，并为它们绑定事件处理函数，以更新页面状态。同时，为了提供更好的用户体验，当第一个页面时取消“后退”按钮，当最后一个页面时取消“前进”按钮。更新页码：按钮的onClick事件会调用setPage来更新页面状态。为了避免直接修改状态，通常使用函数式更新 setPage(prev =gt； prev - 1) 或 setPage(prev =gt； prev 1)。禁用逻辑：“后退”按钮：当页面“前进”按钮：当personArr.length / pageSize完整的React组件实现

是PersonList组件的完整代码，它下面集成了上述所有概念。

import React， { useState } from 'react'； // 引入useStateimport Person from '../person/Person'；import './personList.css'；import { personArr } from '../helpers/personList'； // 假设是您的数据源// Person组件（保持不变，作为子组件渲染关系）const Person = ({ name, exp, post, img }) =gt； { return ( lt；div className=quot；person_wrapperquot；gt； lt；div className=quot；person_imgquot；gt； @@##@@ lt；/divgt； lt；div className=quot；person_textquot；gt； lt；h2 className=quot；person_namequot；gt； {name} lt；/h2gt； lt；p className=quot；person_postquot；gt； {post} lt；/pgt； lt；p className=quot；person_expquot；gt； {exp} lt；/pgt； lt；/divgt； lt；/divgt； )；}；// PersonList组件（实现分页逻辑）const PersonList = () =gt； { const [page， setPage] = useState(1)； // 当前页码，默认为1 const pageSize = 3； // 每页接口数量 // 计算总页数，使用Math.ceil确保页面剩余页数 const totalPages = Math.ceil(personArr.length / pageSize)； return ( lt；div className=quot；list_wrapperquot；gt； {/* 根据当前页码和每页切片大小加载，并渲染Person组件 */} {personArr.slice((page - 1) * pageSize， pageSize * page).map((el， i) =gt； { return ( lt；Person //最佳实践是使用数据中唯一的ID作为key，如果数据没有唯一ID， // 且数据项不会改变顺序或增减，可以使用索引i作为临时方案。

key={i} name={el.name} post={el.post} img={el.img} exp={el.exp} /gt； )； })} lt；div className=quot；pagination_controlsquot；gt； {/* 后退按钮，当第一页时取消 */} lt；按钮disabled={page lt；= 1} onClick={() =gt； setPage((prev) =gt； prev - 1)}gt； 后退 lt；/buttongt； {/* 前进按钮，当遇到最后一页时禁用 */} lt；buttondisabled={page gt；=totalPages} // 使用totalPage来判断是否到达最后一页 onClick={() =gt； setPage((prev) =gt； prev 1)} gt； 前进 lt；/buttongt； lt；/divgt； lt；/divgt； )；}；导出默认PersonList；登录后复制

personList.js 数据示例：const personArr = [ { img： 'path/to/image1.jpg'， name： '张三'， post： '软件工程师'， exp： '工作经验：5年'， }， { img： 'path/to/image2.jpg'， name： '李四'， post： '项目经理'， exp： '工作经验：8年'， }， { img： 'path/to/image3.jpg'， name： '王五'， post： 'UI/UX设计师'， exp： '工作经验：3年'， }， { img： 'path/to/image4.jpg'， name： '赵六'， post： '数据分析师'， exp： '工作经验：4年'， }， { img： 'path/to/image5.jpg'， name： '钱七'， 职位： '产品经理'， exp： '工作经验：6年'， }， { img： 'path/to/image6.jpg'， name： '孙八'， post： '前端开发'， exp： '工作经验：2年'， }，]；export { personArr }；登录后复制

CSS布局提示（personList.css）：

为了实现每行显示3张对应的效果，需要配合CSS布局。

例如，可以使用Flexbox或Grid布局：.list_wrapper { display：flex；flex-wrap：wrap； /* 允许调节换行 */间隙： 20px； /* 调节之间的尺寸 */ justify-content： center； /* 水平居中 */overflow：hidden； /* 隐藏超出容器的部分，为滑动效果做准备 */ width： calc(3 * var(--card-width) 2 * var(--gap))； /* 宽度宽度，根据实际宽度和宽度调整 */ /* 如果是真正的滑动效果，可能需要设置一个固定宽度和overflow-x：scroll */}.person_wrapper { flex： 0 0 calc(33.333 - 20px)； /* 每行三列，宽度*/ max-width： 300px； /* 视觉宽度最大宽度 */ border： 1pxsolid #ccc； padding： 15px；盒子阴影： 2px 2px 5px rgba(0， 0， 0， 0.1)； text-align： center；}.pagination_controls { margin-top： 20px； display： flex； justify-content： center；间隙： 10px；}.pagination_controls 按钮 { padding： 10px 20px； font-size： 16px； 光标： 指针；}.pagination_controls 按钮：禁用 { 背景颜色： #eee； 颜色： #aaa；光标：不允许；}登录后复制注意事项与优化key Prop的重要性：在map函数中为每个渲染的列表项提供一个唯一的关键是React的最佳实践。虽然示例中使用了数组索引i，但在数据项顺序可能改变、增删或重新排序的场景下，这可能导致性能问题或不正确的行为的组件。理想情况下，key应该使用数据项本身的唯一ID（如el.id）。CSS布局： 上述代码只需实现了分页逻辑。要实现视觉“三张需要一行”的效果，配合适当的CSS布局（如Flexbox或Grid）。overflow：hidden和overflow-x：scroll等CSS属性对于实现平滑的平滑效果也至关重要。用户体验：可以添加页面码，让用户知道当前是第几页，总共有多少页。键盘导航支持。对于触摸添加设备，可以考虑集成滑动（滑动）。性能优化：对于非常大的数据集（例如数千甚至数万条记录），简单地高效使用切片和地图可能仍然会引起性能问题。在这种情况下，可以考虑使用虚拟化列表（如react-window或react-virtualized），只渲染可视区域内部的交互。但是，对于一般的分页场景，当前方案已经足够。可复用性：如果您的应用中有多个地方需要类似的分页功能，可以将分页逻辑抽象成一个自定义Hook（例如usePagination）或一个更高阶组件（HOC），以提高代码的可复用性。

总结

通过本教程，你应该掌握了在React中实现关联列表分页和滑动展示的核心技术。关键在于利用useState管理当前页面码状态，结合Array.prototype.slice()动态截取数据，并通过导航按钮提供用户交互。这种模式不仅提升了很大类型列表的性能和用户体验，也了React组件化和状态管理的重要要点。通过灵活运用这些概念，您可以构建出更加动态和用户界面的Web界面。

以上就是React中实现按钮列表分页与滑动展示教程的详细内容，更多请关注乐哥常识网其他相关！