【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定位为框架自带的最基础的…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
JavaScript 标签加载
目录 JavaScript 标签加载script 标签的 async 和 defer 属性,分别代表什么,有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...
无需布线的革命:电力载波技术赋能楼宇自控系统-亚川科技
无需布线的革命:电力载波技术赋能楼宇自控系统 在楼宇自动化领域,传统控制系统依赖复杂的专用通信线路,不仅施工成本高昂,后期维护和扩展也极为不便。电力载波技术(PLC)的突破性应用,彻底改变了…...
【QT控件】显示类控件
目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏:QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...
