当前位置: 首页 > news >正文

【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'));

四、最佳实践

  1. 保持数据的唯一性和稳定性

确保列表中的每个元素都有一个唯一且稳定的 key 属性,这有助于 React 更高效地更新和渲染组件。

  1. 避免使用索引作为 key

尽量不要使用数组的索引作为 key,特别是在列表项可能重新排序或删除的情况下。使用唯一标识符或对象的属性作为 key 是更好的选择。

  1. 分离数据和表现

将数据逻辑和表现逻辑分离,使代码更易于维护和理解。可以通过使用容器组件和展示组件来实现这一点。

  1. 适当地使用条件渲染

在渲染复杂列表时,可以通过条件渲染仅显示需要的部分,提高组件的性能和用户体验。

推荐我的相关专栏:

  • python 错误记录
  • python 笔记
  • 数据结构

在这里插入图片描述

相关文章:

【React】JSX 实现列表渲染

文章目录 一、基础语法1. 使用 map() 方法2. key 属性的使用 二、常见错误和注意事项1. 忘记使用 key 属性2. key 属性的选择 三、列表渲染的高级用法1. 渲染嵌套列表2. 条件渲染列表项3. 动态生成组件 四、最佳实践 在 React 开发中&#xff0c;列表渲染是一个非常常见的需求。…...

写一个简单的兼容GET/POST请求的登录接口

本文目录 安装JDK17安装或者更新Intelij Idea 2024SpringBoot生成项目压缩包下载maven&#xff0c;idea添加maven写POST接口浏览器访问GET接口PostMan安装及访问POST接口 安装JDK17 参考&#xff1a;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官网下载&#xff1a;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. 代码实现 题目链接&#xff1a;3227. Vowels Game in a String 1. 解题思路 这一题稍微分析一下之后就会发现&#xff0c;这个游戏有且只有一种情况Bob才能够赢&#xff0c;即原始字符串当中不存在元音字母的情况&…...

树莓派4B从装系统raspbian到vscode远程编程(python)

1、写在前面 前面用的一直是Ubuntu系统&#xff0c;但是遇到一个奇葩的问题&#xff1a; 北通手柄在终端可以正常使用&#xff0c;接收到数据 但在python程序中使用pygame库初始化时总是报错&#xff1a;Invalid device number&#xff0c;检测不到手柄 经过n次重装系统&am…...

vue上传Excel文件并直接点击文件列表进行预览

本文主要内容&#xff1a;用elementui的Upload 组件上传Excel文件&#xff0c;上传后的列表采用xlsx插件实现点击预览表格内容效果。 在项目中可能会有这样的需求&#xff0c;有很多种方法实现。但是不想要跳转外部地址&#xff0c;所以用了xlsx插件来解析表格&#xff0c;并展…...

OpenCV 像素操作—证件照换底色详细原理 C++纯手写实现

文章目录 总体步骤1.RGB转HSV2.找出要换的底色3.取反&#xff0c;黑白颠倒4.将原图像的非背景部分复制到新背景上 完整代码1.C纯手写版2.官方API版本 总体步骤 1.RGB转HSV 为什么一定要转为HSV 颜色空间&#xff1f; 将图像从BGR颜色空间转换为HSV颜色空间是因为HSV颜色空间更…...

tinygrad框架简介;MLX框架简介

目录 tinygrad框架简介 MLX框架简介 LLaMA​编辑 Stable Diffusion​编辑 tinygrad框架简介 极简主义与易扩展性 tinygrad 的设计理念是极简主义。与 XLA 类比,如果 XLA 是复杂指令集计算 (CISC),那么 tinygrad 就是精简指令集计算 (RISC)。这种简约的设计使得它成为添加…...

服务器重启了之后就卡在某个页面了,花屏,如何解决??

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…...

Hospital 14.6.0全开源医院管理预约系统源码

InfyHMS 具有 60 种功能和 9 种不同类型的用户类型&#xff0c; 他们可以登录系统并根据他们的角色访问他们的数据。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89580674 更多资源下载&#xff1a;关注我。...

C/C++樱花树代码

目录 写在前面 系列文章 C简介 完整代码 代码分析 写在后面 写在前面 C实现精美的樱花树&#xff0c;只需这100行代码&#xff01; 系列文章 序号目录直达链接1爱心代码https://want595.blog.csdn.net/article/details/1363606842李峋同款跳动的爱心https://want595.b…...

sklearn基础学习

1. 简介 1.1 什么是sklearn sklearn&#xff0c;或者更正式地称为scikit-learn&#xff0c;是一个基于Python的开源机器学习库。它建立在NumPy、SciPy和matplotlib之上&#xff0c;提供了简单而有效的工具用于数据挖掘和数据分析。sklearn支持监督学习和无监督学习算法&#…...

SpringBoot 自动配置原理

一、Condition Condition 是在 Spring 4.0 增加的条件判断功能&#xff0c;通过这个可以功能可以实现选择性的创建 Bean 操 作。 思考&#xff1a; SpringBoot 是如何知道要创建哪个 Bean 的&#xff1f;比如 SpringBoot 是如何知道要创建 RedisTemplate 的&#xff1f; …...

Redisson中RQueue的使用场景附一个异步的例子

RQueue 是一个基于 Redis 的分布式作业队列系统&#xff0c;它允许开发者在 Ruby 应用程序中实现异步任务处理和计划任务调度。由于 Redis 提供了高性能的内存数据结构存储&#xff0c;RQueue 可以快速地存储和检索队列中的任务&#xff0c;这使得它非常适合于高并发和低延迟的…...

SpringMVC 控制层框架-下

五、SpringMVC其他扩展 1. 异常处理机制 1.1 异常处理概念 开发过程中是不可避免地会出现各种异常情况&#xff0c;例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题&#xff0c;甚至直接导致程序崩溃。因此&#xff0c;在开发过程中&a…...

(四)js前端开发中设计模式之工厂方法模式

工厂方法模式,通过对产品类的抽象&#xff0c;使其创建业务主要用于负责创建多类产品的实例 const Java function (content) {this.content content;(function () {let oDiv document.createElement(div)oDiv.innerHTML contentoDiv.style.color greendocument.getElement…...

新版GPT-4omini上线!快!真TM快!

大半夜&#xff0c;OpenAI突然推出了GPT-4o mini版本。 当我看到这条消息时&#xff0c;正准备去睡觉。mini版本质上是GPT-4o模型的精简版本&#xff0c;没有什么革命性的创新&#xff0c;因此我并没有太在意。 结果今天早上一觉醒来发现伴随GPT-4o mini上线&#xff0c;官网和…...

【Unity】RPG2D龙城纷争(十七)敌方常规AI(Normal)的实现

更新日期:2024年7月24日。 项目源码:第五章发布(正式开始游戏逻辑的章节) 索引 简介一、AI_Normal类二、AI调遣策略第一阶段:收集1.提供战场数据收集方法2.收集战场数据三、AI调遣策略第二阶段:评估四、AI调遣策略第三阶段:行动简介 AI_Normal定位为框架自带的最基础的…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...