【React】JSX 实现列表渲染
文章目录
- 一、基础语法
- 1. 使用 `map()` 方法
- 2. `key` 属性的使用
- 二、常见错误和注意事项
- 1. 忘记使用 `key` 属性
- 2. `key` 属性的选择
- 三、列表渲染的高级用法
- 1. 渲染嵌套列表
- 2. 条件渲染列表项
- 3. 动态生成组件
- 四、最佳实践
在 React 开发中,列表渲染是一个非常常见的需求。无论是展示一组数据,还是动态生成组件,掌握列表渲染的技巧和最佳实践都是非常重要的。本文将详细介绍如何在 React 中使用 JSX 实现列表渲染,包括基础语法、常见错误以及高级用法,帮助你全面掌握这一技能。
一、基础语法
1. 使用 map() 方法
在 React 中,我们通常使用 JavaScript 的 map() 方法来迭代数组,并返回一个包含 JSX 元素的新数组。每个 JSX 元素都可以表示列表中的一项。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);const element = (<ul>{listItems}</ul>
);ReactDOM.render(element, document.getElementById('root'));
在这个示例中,numbers 数组中的每个元素都会被 map() 方法处理,并返回一个 li 元素。这些 li 元素通过 key 属性唯一标识。
2. key 属性的使用
key 是用于标识列表中每个元素的唯一性。它有助于 React 高效地更新和重新渲染列表。key 应该是一个在其兄弟元素之间唯一的字符串或数字。
const todos = ['Learn React', 'Build a React App', 'Deploy the App'];
const todoItems = todos.map((todo, index) =><li key={index}>{todo}</li>
);const element = (<ul>{todoItems}</ul>
);ReactDOM.render(element, document.getElementById('root'));
二、常见错误和注意事项
1. 忘记使用 key 属性
在渲染动态列表时,忘记添加 key 属性是一个常见错误。缺少 key 属性会导致 React 无法正确地识别和管理元素的变化。
// 错误示例:缺少 key 属性
const listItems = numbers.map((number) =><li>{number}</li>
);
2. key 属性的选择
key 属性应该尽可能唯一且稳定,不要使用数组的索引作为 key,因为当列表项重新排序时,索引会改变,从而导致潜在的渲染问题。
// 不推荐的做法:使用数组索引作为 key
const listItems = todos.map((todo, index) =><li key={index}>{todo}</li>
);// 推荐的做法:使用唯一标识符作为 key
const todos = [{ id: 1, text: 'Learn React' },{ id: 2, text: 'Build a React App' },{ id: 3, text: 'Deploy the App' }
];const todoItems = todos.map((todo) =><li key={todo.id}>{todo.text}</li>
);
三、列表渲染的高级用法
1. 渲染嵌套列表
在实际应用中,可能需要渲染嵌套列表。例如,渲染一个包含多个子项的分类列表。可以通过递归方式处理嵌套数据结构。
const categories = [{id: 1,name: 'Fruits',items: ['Apple', 'Banana', 'Orange']},{id: 2,name: 'Vegetables',items: ['Carrot', 'Broccoli', 'Spinach']}
];const CategoryList = ({ categories }) => (<ul>{categories.map(category => (<li key={category.id}>{category.name}<ul>{category.items.map(item => (<li key={item}>{item}</li>))}</ul></li>))}</ul>
);ReactDOM.render(<CategoryList categories={categories} />, document.getElementById('root'));
2. 条件渲染列表项
在渲染列表时,可以根据条件有选择地渲染特定的列表项。
const tasks = [{ id: 1, text: 'Do the dishes', completed: false },{ id: 2, text: 'Take out the trash', completed: true },{ id: 3, text: 'Mow the lawn', completed: false }
];const TaskList = ({ tasks }) => (<ul>{tasks.filter(task => !task.completed).map(task => (<li key={task.id}>{task.text}</li>))}</ul>
);ReactDOM.render(<TaskList tasks={tasks} />, document.getElementById('root'));
3. 动态生成组件
在列表渲染中,可以动态生成组件。例如,渲染一组自定义组件,每个组件都代表列表中的一项。
const products = [{ id: 1, name: 'Laptop', price: 999.99 },{ id: 2, name: 'Phone', price: 799.99 },{ id: 3, name: 'Tablet', price: 499.99 }
];const Product = ({ product }) => (<div><h2>{product.name}</h2><p>Price: ${product.price}</p></div>
);const ProductList = ({ products }) => (<div>{products.map(product => (<Product key={product.id} product={product} />))}</div>
);ReactDOM.render(<ProductList products={products} />, document.getElementById('root'));
四、最佳实践
- 保持数据的唯一性和稳定性
确保列表中的每个元素都有一个唯一且稳定的 key 属性,这有助于 React 更高效地更新和渲染组件。
- 避免使用索引作为
key
尽量不要使用数组的索引作为 key,特别是在列表项可能重新排序或删除的情况下。使用唯一标识符或对象的属性作为 key 是更好的选择。
- 分离数据和表现
将数据逻辑和表现逻辑分离,使代码更易于维护和理解。可以通过使用容器组件和展示组件来实现这一点。
- 适当地使用条件渲染
在渲染复杂列表时,可以通过条件渲染仅显示需要的部分,提高组件的性能和用户体验。
推荐我的相关专栏:
- python 错误记录
- python 笔记
- 数据结构

相关文章:
【React】JSX 实现列表渲染
文章目录 一、基础语法1. 使用 map() 方法2. key 属性的使用 二、常见错误和注意事项1. 忘记使用 key 属性2. key 属性的选择 三、列表渲染的高级用法1. 渲染嵌套列表2. 条件渲染列表项3. 动态生成组件 四、最佳实践 在 React 开发中,列表渲染是一个非常常见的需求。…...
写一个简单的兼容GET/POST请求的登录接口
本文目录 安装JDK17安装或者更新Intelij Idea 2024SpringBoot生成项目压缩包下载maven,idea添加maven写POST接口浏览器访问GET接口PostMan安装及访问POST接口 安装JDK17 参考:https://blog.csdn.net/tiehou/article/details/129575138 安装或者更新Int…...
【好玩的经典游戏】Docker环境下部署赛车小游戏
【好玩的经典游戏】Docker环境下部署赛车小游戏 一、小游戏介绍1.1 小游戏简介1.2 项目预览二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 安装Docker环境3.2 检查Docker服务状态3.3 检查Docker版本3.4 检查docker compose 版本四、构建容器镜像4.1 下…...
物理机 gogs+jenkins+sonarqube 实现CI/CD
一、部署gogs_0.11.91_linux_amd64.tar.gz gogs官网下载:https://dl.gogs.io/ yum -y install mariadb-serversystemctl start mariadbsystemctl enable mariadbuseradd gittar zxvf gogs_0.11.91_linux_amd64.tar.gzcd gogsmysql -u root -p < scripts/mysql.…...
前端表格解析方法
工具类文件 // fileUtils.tsimport { ref } from vue; import * as xlsx from xlsx;interface RowData {[key: string]: any; }export const tableData ref<RowData[]>([]);export async function handleFileSelect(url: string): Promise<void> {try {const res…...
Leetcode 3227. Vowels Game in a String
Leetcode 3227. Vowels Game in a String 1. 解题思路2. 代码实现 题目链接:3227. Vowels Game in a String 1. 解题思路 这一题稍微分析一下之后就会发现,这个游戏有且只有一种情况Bob才能够赢,即原始字符串当中不存在元音字母的情况&…...
树莓派4B从装系统raspbian到vscode远程编程(python)
1、写在前面 前面用的一直是Ubuntu系统,但是遇到一个奇葩的问题: 北通手柄在终端可以正常使用,接收到数据 但在python程序中使用pygame库初始化时总是报错:Invalid device number,检测不到手柄 经过n次重装系统&am…...
vue上传Excel文件并直接点击文件列表进行预览
本文主要内容:用elementui的Upload 组件上传Excel文件,上传后的列表采用xlsx插件实现点击预览表格内容效果。 在项目中可能会有这样的需求,有很多种方法实现。但是不想要跳转外部地址,所以用了xlsx插件来解析表格,并展…...
OpenCV 像素操作—证件照换底色详细原理 C++纯手写实现
文章目录 总体步骤1.RGB转HSV2.找出要换的底色3.取反,黑白颠倒4.将原图像的非背景部分复制到新背景上 完整代码1.C纯手写版2.官方API版本 总体步骤 1.RGB转HSV 为什么一定要转为HSV 颜色空间? 将图像从BGR颜色空间转换为HSV颜色空间是因为HSV颜色空间更…...
tinygrad框架简介;MLX框架简介
目录 tinygrad框架简介 MLX框架简介 LLaMA编辑 Stable Diffusion编辑 tinygrad框架简介 极简主义与易扩展性 tinygrad 的设计理念是极简主义。与 XLA 类比,如果 XLA 是复杂指令集计算 (CISC),那么 tinygrad 就是精简指令集计算 (RISC)。这种简约的设计使得它成为添加…...
服务器重启了之后就卡在某个页面了,花屏,如何解决??
🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…...
Hospital 14.6.0全开源医院管理预约系统源码
InfyHMS 具有 60 种功能和 9 种不同类型的用户类型, 他们可以登录系统并根据他们的角色访问他们的数据。 源码下载:https://download.csdn.net/download/m0_66047725/89580674 更多资源下载:关注我。...
C/C++樱花树代码
目录 写在前面 系列文章 C简介 完整代码 代码分析 写在后面 写在前面 C实现精美的樱花树,只需这100行代码! 系列文章 序号目录直达链接1爱心代码https://want595.blog.csdn.net/article/details/1363606842李峋同款跳动的爱心https://want595.b…...
sklearn基础学习
1. 简介 1.1 什么是sklearn sklearn,或者更正式地称为scikit-learn,是一个基于Python的开源机器学习库。它建立在NumPy、SciPy和matplotlib之上,提供了简单而有效的工具用于数据挖掘和数据分析。sklearn支持监督学习和无监督学习算法&#…...
SpringBoot 自动配置原理
一、Condition Condition 是在 Spring 4.0 增加的条件判断功能,通过这个可以功能可以实现选择性的创建 Bean 操 作。 思考: SpringBoot 是如何知道要创建哪个 Bean 的?比如 SpringBoot 是如何知道要创建 RedisTemplate 的? …...
Redisson中RQueue的使用场景附一个异步的例子
RQueue 是一个基于 Redis 的分布式作业队列系统,它允许开发者在 Ruby 应用程序中实现异步任务处理和计划任务调度。由于 Redis 提供了高性能的内存数据结构存储,RQueue 可以快速地存储和检索队列中的任务,这使得它非常适合于高并发和低延迟的…...
SpringMVC 控制层框架-下
五、SpringMVC其他扩展 1. 异常处理机制 1.1 异常处理概念 开发过程中是不可避免地会出现各种异常情况,例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题,甚至直接导致程序崩溃。因此,在开发过程中&a…...
(四)js前端开发中设计模式之工厂方法模式
工厂方法模式,通过对产品类的抽象,使其创建业务主要用于负责创建多类产品的实例 const Java function (content) {this.content content;(function () {let oDiv document.createElement(div)oDiv.innerHTML contentoDiv.style.color greendocument.getElement…...
新版GPT-4omini上线!快!真TM快!
大半夜,OpenAI突然推出了GPT-4o mini版本。 当我看到这条消息时,正准备去睡觉。mini版本质上是GPT-4o模型的精简版本,没有什么革命性的创新,因此我并没有太在意。 结果今天早上一觉醒来发现伴随GPT-4o mini上线,官网和…...
【Unity】RPG2D龙城纷争(十七)敌方常规AI(Normal)的实现
更新日期:2024年7月24日。 项目源码:第五章发布(正式开始游戏逻辑的章节) 索引 简介一、AI_Normal类二、AI调遣策略第一阶段:收集1.提供战场数据收集方法2.收集战场数据三、AI调遣策略第二阶段:评估四、AI调遣策略第三阶段:行动简介 AI_Normal定位为框架自带的最基础的…...
多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言:多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
