当前位置：首页 > article >正文

React从基础入门到高级实战：React 基础入门 - 列表渲染与条件渲染

article 2025/8/23 13:48:50

列表渲染与条件渲染

在 React 开发中，列表渲染 和 条件渲染 是处理动态数据和用户交互的基础技术。通过列表渲染，你可以根据数据动态生成 UI 元素；而条件渲染则让你根据特定条件展示不同的内容。这两个技能在实际项目中非常常见，比如展示产品列表或根据用户登录状态显示不同界面。

本文将深入讲解如何在 React 中实现列表渲染和条件渲染，并提供代码示例和实践指导。无论你是初学者还是想复习基础知识，这篇教程都将为你提供清晰且实用的内容。

1. 列表渲染

列表渲染是指根据数据数组生成一组 JSX 元素的过程。在 React 中，通常使用 JavaScript 的 map 函数来实现。

1.1 基本用法

假设你有一个任务列表的数据：

const tasks = [{ id: 1, text: '学习 React' },{ id: 2, text: '练习 JSX' },{ id: 3, text: '掌握 Hooks' }
];

你可以用 map 函数将这个数组渲染为一个列表：

function TaskList() {return (<ul>{tasks.map(task => (<li key={task.id}>{task.text}</li>))}</ul>);
}

tasks.map 将每个任务对象转换为一个 <li> 元素。
key={task.id} 为每个列表项指定一个唯一标识。

1.2 key 属性的重要性

key 是 React 中的特殊属性，用于帮助 React 高效地更新 DOM。它在列表渲染中必不可少。

为什么需要 key：React 用 key 来追踪每个元素的变化，确保只更新必要的部分。
要求：key 必须在同级元素中唯一且稳定。
错误示例：使用数组索引作为 key（如 key={index}）在动态列表中可能导致问题，因为索引会随列表变化而改变。
正确做法：使用数据中的唯一标识符，如 id。

示例：

// 错误：使用索引作为 key
{tasks.map((task, index) => (<li key={index}>{task.text}</li>
))}// 正确：使用唯一 ID
{tasks.map(task => (<li key={task.id}>{task.text}</li>
))}

2. 条件渲染

条件渲染是指根据条件控制 UI 元素的显示。React 没有专门的条件渲染语法，而是利用 JavaScript 的条件语句。

2.1 使用 if-else

在函数外部使用 if-else 判断：

function Welcome({ isLoggedIn }) {if (isLoggedIn) {return <p>欢迎回来！</p>;} else {return <p>请登录。</p>;}
}

2.2 使用三元运算符

在 JSX 中使用三元运算符，适合简单条件：

function UserStatus({ isLoggedIn }) {return (<div>{isLoggedIn ? <p>欢迎回来！</p> : <p>请登录。</p>}</div>);
}

2.3 使用逻辑运算符

用 && 运算符在条件为 true 时渲染内容：

function Alert({ hasUpdate }) {return (<div>{hasUpdate && <p>有新更新！</p>}</div>);
}

如果 hasUpdate 为 false，则什么都不渲染。

2.4 返回 null 隐藏内容

通过返回 null 完全不渲染组件：

function SecretMessage({ show }) {if (!show) return null;return <p>这是一个秘密消息。</p>;
}

3. 实际应用：任务列表

让我们结合列表渲染和条件渲染，创建一个简单的任务列表应用，支持标记任务完成和过滤已完成任务。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>任务列表</title><script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.26.0/babel.min.js"></script><script src="https://cdn.tailwindcss.com"></script>
</head>
<body><div id="root" class="p-4"></div><script type="text/babel">function TodoApp() {const [todos, setTodos] = React.useState([{ id: 1, text: '学习 React', completed: false },{ id: 2, text: '练习 JSX', completed: true },{ id: 3, text: '掌握 Hooks', completed: false }]);const [showCompleted, setShowCompleted] = React.useState(true);const toggleCompleted = (id) => {setTodos(todos.map(todo =>todo.id === id ? { ...todo, completed: !todo.completed } : todo));};const filteredTodos = showCompleted? todos: todos.filter(todo => !todo.completed);return (<div className="max-w-md mx-auto"><h1 className="text-2xl font-bold mb-4">任务列表</h1><label className="flex items-center mb-4"><inputtype="checkbox"checked={showCompleted}onChange={() => setShowCompleted(!showCompleted)}className="mr-2"/>显示已完成任务</label><ul className="space-y-2">{filteredTodos.map(todo => (<likey={todo.id}className="flex justify-between items-center p-2 bg-gray-100 rounded"><spanstyle={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.text}</span><buttononClick={() => toggleCompleted(todo.id)}className="px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">{todo.completed ? '标记未完成' : '标记完成'}</button></li>))}</ul></div>);}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<TodoApp />);</script>
</body>
</html>

4. 如何运行

将以上代码保存为 index.html 文件。
在浏览器中打开该文件，你将看到一个任务列表。
你可以：
- 点击按钮切换任务的完成状态。
- 勾选或取消勾选“显示已完成任务”来过滤列表。

5. 总结

通过这篇教程，你学习了：

如何使用 map 进行列表渲染并正确设置 key。
如何通过 if-else、三元运算符和逻辑运算符实现条件渲染。
如何结合两者构建一个简单的任务列表应用。

这些技能是 React 开发的基础，掌握它们将帮助你更自信地构建动态和交互式的界面。下一篇文章将深入学习React的工作原理：虚拟 DOM 与 Diff 算法，敬请期待！

React从基础入门到高级实战：React 基础入门 - 列表渲染与条件渲染

列表渲染与条件渲染在 React 开发中，列表渲染和条件渲染是处理动态数据和用户交互的基础技术。通过列表渲染，你可以根据数据动态生成 UI 元素；而条件渲染则让你根据特定条件展示不同的内容。这两个技能在实际项目中非常常见，…...

编程日记 2025/8/20 4:51:12

在 stm32 中 volatile unsigned signed 分别有什么作用，分别在什么场景下使用？

在STM32开发中， plaintext 复制 volatile 、 plaintext 复制 unsigned 和 plaintext 复制 signed 是三个关键的关键字，它们的用途和场景如下： 1. plaintext 复制 volatile 关键字作用： 禁止编译器优化&#xff…...

编程日记 2025/8/21 4:44:50

FreeBSD14.2因为爆内存而导致Xfce4视窗被卡，桌面变黑色，只能看到鼠标在窗体中心，鼠标无反应，键盘无反应

拿问题问AI pytest的时候因为内存不足导致xfce4卡住（xfce4相关进程被关闭），桌面变黑色，只能看到鼠标在窗体中心，鼠标无反应，键盘无反应，请问应该怎么办？ pytest的时候因为内存不足导…...

编程日记 2025/7/8 0:30:58

k8s-NetworkPolicy

在 Kubernetes 中，NetworkPolicy 是一种资源对象，用于定义 Pod 之间的网络通信策略。它允许你控制哪些 Pod 可以相互通信，以及如何通信。通过使用 NetworkPolicy，可以实现更细粒度的网络访问控制，增强集群的安全性。 1…...

编程日记 2025/6/29 23:47:24

spring-ai 集成 mcp 之投机取巧

主旨这篇文章主旨就一点，罗列spring-ai对mcp集成导致出现的一系列问题分析由于mcp未问世之前，就早就已经有了工具调用，源码如下： public interface ToolCallback {/*** Definition used by the AI model to determine when a…...

编程日记 2025/7/27 14:02:49

大语言模型的完整训练周期从0到1的体系化拆解

以下部分内容参考了AI。要真正理解大语言模型（LLM）的创生过程，我们需要将其拆解为一个完整的生命周期，每个阶段的关键技术相互关联，共同支撑最终模型的涌现能力。以下是体系化的训练流程框架： 阶段一&am…...

编程日记 2025/8/16 17:56:12

历年北京邮电大学保研上机真题

2025北京邮电大学保研上机真题 2024北京邮电大学保研上机真题 2023北京邮电大学保研上机真题在线测评链接：https://pgcode.cn/problem?classification1 32位二进制串加法题目描述输入一个32位的二进制01串，输出这个数1和3后的32位二进制串。输入…...

编程日记 2025/8/17 17:02:31

elementUI 中el-date-picker和el-select的样式调整

1. el-date-picker <el-date-picker class"select1" size"small" v-model"timeRangeArr" type"daterange" align"right" unlink-panels range-separator"至" start-placeholder"开始日期" end-pla…...

编程日记 2025/8/18 23:52:32

《仿盒马》app开发技术分享-- 定位获取（端云一体）

开发准备上一节我们实现了地址管理页面的数据查询和展示，接下来我们要实现的功能是地址添加相关的，我们想实现的功能是地图选点，那么在地图选点之前我们要做的就是先获取用户当前的定位。获取定位后我们拿到经纬度和其他信息，然…...

编程日记 2025/8/22 14:21:30

黑马点评--基于Redis实现共享session登录

集群的session共享问题分析 session共享问题：多台Tomcat无法共享session存储空间，当请求切换到不同Tomcat服务时，原来存储在一台Tomcat服务中的数据，在其他Tomcat中是看不到的，这就导致了导致数据丢失的问题。虽然系…...

编程日记 2025/8/11 20:35:36

Mujoco 学习系列（二）基础功能与xml使用

这篇文章是 Mujoco 学习系列第二篇，主要介绍一些基础功能与 xmI 使用，重点在于如何编写与读懂 xml 文件。运行这篇博客前请先确保正确安装 Mujoco 并通过了基本功能与GUI的验证，即至少完整下面这个博客的第二章节内容： Mujoc…...

编程日记 2025/8/18 7:24:46

比特授权云外壳加密支持Android 15！

在信息化时代，多数软件供应商需要适配安卓系统，以扩大市场、满足用户需求并提升竞争力。APK作为Android应用的安装包，包含代码、资源、配置文件等运行所需组件，用于在设备端分发和安装应用。企业在分发软件时，需要通过…...

编程日记 2025/8/18 4:42:16

uniapp使用sse连接后端，接收后端推过来的消息（app不支持！！）

小白终成大白文章目录小白终成大白前言一、什么是SSE呢？和websocket的异同点有什么？相同点不同点二、直接上实现代码总结前言一般的请求就是前端发后端回复你一下我一下如果需要有什么实时性的后端可以主动告诉前端的技术我首先会想到 webso…...

编程日记 2025/8/20 15:27:42

历年复旦大学保研上机真题

2025复旦大学保研上机真题 2024复旦大学保研上机真题 2023复旦大学保研上机真题在线测评链接：https://pgcode.cn/problem?classification1 最大公共子串题目描述输入 3 个子串，输出这 3 个子串的最大公共子串。输入格式输入包含 3 个子串&…...

编程日记 2025/8/10 7:45:33

黑马点评-实现安全秒杀优惠券(使并发一人一单，防止并发超卖)

一.实现优惠券秒杀 1.最原始代码： Service public class VoucherOrderServiceImpl extends ServiceImpl<VoucherOrderMapper, VoucherOrder> implements IVoucherOrderService {Resourceprivate ISeckillVoucherService seckillVoucherService;Resourcepriv…...

编程日记 2025/8/17 4:40:39

解决论文中字体未嵌入的问题

文章总览：YuanDaiMa2048博客文章总览解决论文中字体未嵌入的问题问题描述解决方案：使用 Adobe PDF 打印机嵌入字体（WPS版）步骤一：打开 PDF 文件步骤二：选择打印到 Adobe PDF步骤三：修改 Adobe…...

编程日记 2025/8/20 20:32:27

leetcode 131. Palindrome Partitioning

目录一、题目描述二、方法1、回溯法每次暴力判断回文子串三、方法2、动态规划回溯法一、题目描述分割回文子串 131. Palindrome Partitioning 二、方法1、回溯法每次暴力判断回文子串 class Solution {vector<vector<string>> res;vector<string>…...

编程日记 2025/8/21 7:01:08

Android本地语音识别引擎深度对比与集成指南：Vosk vs SherpaOnnx

技术选型对比矩阵对比维度VoskSherpaOnnx核心架构基于Kaldi二次开发ONNX Runtime + K2新一代架构模型格式专用格式（需专用工具转换）ONNX标准格式（跨框架通用）中文识别精度89.2% (TDNN模型)92.7% (Zipformer流式模型)内存占用60-150MB30-80MB迟表现320-500ms180-300ms多线程…...

编程日记 2025/8/22 6:23:56

审计报告附注救星！实现Word表格纵向求和+横向计算及其对应的智能校验

在审计工作中，Word附注通常包含很多表格。为了确保附注数字的准确性，我们需要对这些表格进行数字逻辑校验，主要包含两个维度：在纵向上验证合计项金额是否正确；在横向上检查“年末金额年初金额本期增加-本期减少”的勾稽…...

编程日记 2025/8/10 7:06:13

人工智能数学基础实验（四）：最大似然估计的-AI 模型训练与参数优化

一、实验目的理解最大似然估计（MLE）原理：掌握通过最大化数据出现概率估计模型参数的核心思想。实现 MLE 与 AI 模型结合：使用 MLE 手动估计朴素贝叶斯模型参数，并与 Scikit-learn 内置模型对比，深入理解参…...

编程日记 2025/8/11 18:01:55

告别延迟！Ethernetip转modbustcp网关在熔炼车间监控的极速时代

熔炼车间热火朝天，巨大的热风炉发出隆隆的轰鸣声，我作为一名技术操控工，正密切关注着监控系统上跳动的各项参数。这套基于EtherNET/ip的监控系统，是我们车间数字化改造的核心，它将原本分散的控制单元整合在一起&#x…...

编程日记 2025/7/27 13:58:00

Kotlin协程优化Android ANR问题

引言在Android开发中，ANR（Application Not Responding）是用户体验的致命杀手。当主线程被耗时操作阻塞超过阈值（5秒前台/10秒后台），系统会直接弹窗提示应用无响应。本文将深入剖析如何通过Kotlin协程将耗…...

编程日记 2025/7/31 15:27:32

Visual Studio Code插件离线安装指南：从市场获取并手动部署

Visual Studio Code插件离线安装指南：从市场获取并手动部署一、场景背景二、操作步骤详解步骤1：访问官方插件市场步骤2：定位目标版本步骤3：提取关键参数步骤4：构造下载链接步骤5：下载与安装三、注意事项 …...

编程日记 2025/8/10 8:33:57

构建安全AI风险识别大模型：CoT、训练集与Agent vs. Fine-Tuning对比

构建安全AI风险识别大模型：CoT、训练集与Agent vs. Fine-Tuning对比安全AI风险识别大模型旨在通过自然语言处理（NLP）技术，检测和分析潜在的安全威胁，如数据泄露、合规违规或恶意行为。本文从Chain-of-Thought (CoT)设计、训练集构建、以及Agent-based方法与**AI直接调优…...

编程日记 2025/7/10 14:07:39

计算机视觉---YOLOv1

YOLOv1深度解析：单阶段目标检测的开山之作一、YOLOv1概述提出背景： 2016年由Joseph Redmon等人提出，全称"You Only Look Once"，首次将目标检测视为回归问题，开创单阶段（One-Stage&#xff09…...

编程日记 2025/8/12 0:03:52

无法同步书签,火狐浏览器修改使用国内的账号服务器

自动更新版本后,变为国际服版本的了,点击右上角无法登录firefox,也无法同步书签,现在国际服的火狐浏览器修改使用国内的账号服务器，需要先在搜索框输入 about:config 中改变三项配置，然后重启浏览器，才能正常使用国内的火狐账号服务器 ident…...

编程日记 2025/6/17 1:10:46

动态防御体系实战：AI如何重构DDoS攻防逻辑

1. 传统高防IP的静态瓶颈传统高防IP依赖预定义规则库，面对SYN Flood、CC攻击等常见威胁时，常因规则更新滞后导致误封合法流量。例如，某电商平台遭遇HTTP慢速攻击时，静态阈值过滤无法区分正常用户与攻击者，导致订单接…...

编程日记 2025/8/16 0:53:43

Kotlin Native与C/C++高效互操作：技术原理与性能优化指南

一、互操作基础与性能瓶颈分析 1.1 Kotlin Native调用原理 Kotlin Native通过LLVM编译器生成机器码，与C/C++的互操作基于以下核心机制： CInterop工具：解析C头文件生成Kotlin/Native绑定（.klib），自动生成类型映射和包装函数双向调用约定： Kotlin调用C：直接通过生成的绑…...

编程日记 2025/8/17 0:34:50