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

『React』条件渲染的7种方法

news 2025/7/23 9:24:15

在 React 开发中，我们经常需要根据不同条件显示不同内容 —— 比如用户登录后显示个人中心，未登录时显示登录按钮；数据加载中显示 loading 状态，加载完成后显示内容。这种 “根据条件决定渲染什么” 的操作，就是条件渲染。

本文将带你系统学习 React 中 7 种常用的条件渲染方式，从基础到进阶，每种方式都配有代码示例和适用场景分析。

什么是条件渲染？

简单说，条件渲染就是根据特定条件（如变量值、状态、属性等），让组件呈现不同的 UI。

比如一个简单场景：

  • 当用户已登录（isLoggedIn = true），显示 “欢迎回来，xxx”
  • 当用户未登录（isLoggedIn = false），显示 “请登录”

这就是最基础的条件渲染需求。React 没有专门的 “条件渲染语法”，而是通过 JavaScript 的逻辑结合 JSX 实现，非常灵活。

7 种常用的条件渲染方式

1. if/else 语句：最直观的条件判断

最基础也最容易理解的方式：用 JavaScript 的if/else语句在组件中拆分不同渲染逻辑。

在这里插入图片描述

import { useState } from 'react';function UserGreeting() {const [isLoggedIn, setIsLoggedIn] = useState(false);// 用if/else判断条件，返回不同JSXif (isLoggedIn) {return <h1>欢迎回来，用户！</h1>;} else {return <h1>请先登录~</h1>;}// 也可以在return前定义内容// let content;// if (isLoggedIn) {//   content = <h1>欢迎回来，用户！</h1>;// } else {//   content = <h1>请先登录~</h1>;// }// return content;
}

适用场景：

  • 逻辑较复杂的条件判断（比如多个条件组合）
  • 需要在渲染前处理大量逻辑（如数据转换）

优点：直观易懂，符合 JavaScript 思维；适合复杂条件。
缺点：在 JSX 中无法直接使用，必须在 return 外处理。

2. 三元运算符：JSX 中直接写简单条件

三元运算符（condition ? exprIfTrue : exprIfFalse）可以直接嵌入 JSX 中，适合简单的二选一渲染。

import { useState } from 'react';function ScoreDisplay() {const [score, setScore] = useState(75);return (<div><p>你的成绩：{score}</p>{/* 三元运算符直接写在JSX中 */}<p>{score >= 60 ? '恭喜，及格了！' : '抱歉，未及格'}</p></div>);
}

适用场景：

  • 简单的二选一判断（是 / 否、大于 / 小于等）
  • 需要在 JSX 中直接嵌入条件逻辑

优点：简洁，可直接嵌入 JSX；适合简单条件。
缺点：条件复杂时可读性差（不建议嵌套三元运算符）。

3. 逻辑与 (&&) 运算符：满足条件才渲染元素

当你需要 “条件满足时显示某个元素，不满足时不显示”（而不是显示另一个元素），可以用&&运算符。

import { useState } from 'react';function Notification() {const [unreadCount, setUnreadCount] = useState(3);return (<div><h2>消息中心</h2>{/* 当unreadCount > 0时，显示小红点和数量 */}{unreadCount > 0 && (<span style={{ backgroundColor: 'red', color: 'white', borderRadius: '50%',padding: '2px 6px',marginLeft: '8px'}}>{unreadCount}</span>)}</div>);
}

原理：
JavaScript 中，true && expr会返回expr，false && expr会返回false，而 React 会忽略false的渲染。

注意：

  • 避免用 0 作为条件值，因为0 && ...会渲染 0（而非不渲染）。
    解决：unreadCount > 0 && ...（明确返回布尔值）。

适用场景：

  • 条件满足时渲染某个元素，不满足时不渲染（单分支）
  • 简单的 “存在即显示” 逻辑（如未读消息、提示标签）

4. 元素变量：先存后用，适合多条件

先将不同条件对应的 JSX 赋值给变量，再在 return 中使用变量。适合多条件分支场景。

在这里插入图片描述

import { useState } from 'react';function UserRole() {const [role, setRole] = useState('user'); // 可能的值：'user' | 'admin' | 'guest'// 定义元素变量，根据条件赋值let roleDesc;if (role === 'admin') {roleDesc = <p>您拥有管理员权限，可以管理所有内容</p>;} else if (role === 'user') {roleDesc = <p>您是普通用户，可以查看和编辑自己的内容</p>;} else {roleDesc = <p>您是访客，仅可查看公开内容</p>;}return (<div><h2>用户权限</h2>{roleDesc} {/* 使用变量 */}</div>);
}

适用场景：

  • 多个条件分支（3 个及以上）
  • 需要在渲染前对元素进行额外处理（如添加样式、绑定事件）

优点：逻辑清晰，变量名可增强可读性；避免 JSX 中混入大量条件判断。

5. switch-case 语句：多分支条件的规范写法

当条件分支较多（如根据不同状态码显示不同提示），用switch-case比if/else更整洁。

import { useState } from 'react';function StatusMessage() {const [status, setStatus] = useState('pending'); // 'pending' | 'success' | 'error' | 'warning'// 用switch-case返回不同内容function getMessage() {switch (status) {case 'pending':return <p>加载中，请稍候...</p>;case 'success':return <p style={{ color: 'green' }}>操作成功！</p>;case 'error':return <p style={{ color: 'red' }}>操作失败，请重试</p>;case 'warning':return <p style={{ color: 'orange' }}>注意：数据不完整</p>;default:return <p>未知状态</p>;}}return (<div><h2>操作状态</h2>{getMessage()} {/* 调用函数返回结果 */}</div>);
}

适用场景：

  • 多个固定值的条件分支（如状态码、类型标识）
  • 需要明确 “默认情况”（default分支）的场景

优点：结构清晰，比多个if/else if更易维护；强制考虑默认情况。

6. 自定义条件组件：封装复用条件逻辑

如果多个组件需要相同的条件渲染逻辑，可以封装成自定义组件，提高复用性。

// 封装一个"权限控制组件"
function WithPermission({ permission, children, fallback = null }) {// 模拟权限判断逻辑（实际项目可能更复杂）const hasPermission = checkUserPermission(permission);// 有权限则显示children，否则显示fallbackreturn hasPermission ? children : fallback;
}// 模拟权限检查函数
function checkUserPermission(permission) {const userPermissions = ['read', 'edit']; // 假设用户拥有的权限return userPermissions.includes(permission);
}// 使用示例
function Dashboard() {return (<div><h1>控制台</h1>{/* 所有用户可见 */}<p>欢迎来到控制台</p>{/* 仅有权限'edit'的用户可见 */}<WithPermission permission="edit" fallback={<p>无编辑权限</p>}><button>编辑内容</button></WithPermission>{/* 仅有权限'delete'的用户可见（无权限时不显示） */}<WithPermission permission="delete"><button>删除内容</button></WithPermission></div>);
}

适用场景：

  • 多个组件需要相同的条件逻辑（如权限控制、角色判断）
  • 条件逻辑较复杂，需要集中维护

优点：逻辑复用，减少重复代码；组件职责单一，更易测试。

7. 动态导入 + Suspense：按需加载组件（React 18+）

对于大型应用，可根据条件动态导入组件（未满足条件时不加载组件代码），配合Suspense显示加载状态。

import { Suspense, useState, lazy } from 'react';// 动态导入组件（只在需要时加载）
const PremiumFeature = lazy(() => import('./PremiumFeature'));
const FreeFeature = lazy(() => import('./FreeFeature'));function App() {const [isPremium, setIsPremium] = useState(false);return (<div><h1>应用功能</h1>{/* 免费功能始终显示 */}<Suspense fallback={<p>加载免费功能中...</p>}><FreeFeature /></Suspense>{/* 付费功能仅付费用户可见，且仅在需要时加载代码 */}{isPremium && (<Suspense fallback={<p>加载高级功能中...</p>}><PremiumFeature /></Suspense>)}</div>);
}

适用场景：

  • 大型应用的代码分割（减少初始加载体积）
  • 条件触发的 “重量级” 组件（如付费功能、模态框）

优点：优化性能，减少不必要的代码加载；配合 Suspense 提升用户体验。

三、条件渲染避坑的点

  1. 避免渲染undefined
    确保条件判断的分支都有返回值，否则可能出现undefined导致的白屏。
    不好的示例：{condition && undefined}（会渲染undefined）
  2. 谨慎嵌套条件
    多层嵌套的三元运算符或if/else会导致代码可读性差，建议拆分为多个组件或用元素变量。
  3. 注意 falsy 值的渲染
    React 会渲染0、''（空字符串）等 falsy 值，而非忽略它们。
    解决：用!!转为布尔值，或明确判断> 0等。

四、如何选择合适的方式？

方式适用场景优点缺点
if/else复杂逻辑、多条件组合直观，适合复杂逻辑不能直接嵌入 JSX
三元运算符简单二选一条件简洁，可嵌入 JSX复杂条件可读性差
逻辑与 (&&)单分支（满足条件才显示）极简，适合简单判断需注意 falsy 值渲染问题
元素变量多条件分支，需预处理元素逻辑清晰，易维护需额外定义变量
switch-case多个固定值的分支（如状态码）结构规范，强制默认分支代码量略多
自定义条件组件复用条件逻辑（如权限控制）复用性好，职责单一需要额外封装
动态导入 + Suspense大型应用按需加载组件优化性能，减少初始体积需 React 18 + 支持

记住：没有 “最好” 的方式，只有 “最合适” 的方式。根据条件复杂度、复用需求和项目场景选择即可。

以上就是本文的全部内容了，想了解更多React用法可以在《React中文教程》里查阅

http://www.dtcms.com/a/292789.html

相关文章：

  • 基于Prompt 的DevOps 与终端重塑
  • 装备数字孪生底座平台探索
  • HTTP 协议常见字段（请求头/响应头）
  • 虚幻5入门教程：如何在虚幻5中创建一个C++的Plugin
  • android 12 的 aidl for HAL 开发示例
  • VR技术在元宇宙游戏中的作用及发展前景深度分析
  • Fluent许可与网络安全策略
  • 基于JSP的快递管理系统/快递寄出管理系统
  • 初识opencv01——基本api操作
  • Transactional事务不生效案例与解决方案？
  • 基于深度学习Transform的steam游戏特征分析与可视化【词云-情感词典分析-主题分析-词频分析-关联分析】
  • Android 自动的文件管理器存在以下问题，文件管理器横竖屏切换会停止运行，如何解决
  • 多维基分析求导法则
  • DNS应用层协议
  • OEC 刷机Armbain 25.05后配置说明
  • Vue3中watch和watchEffect区别和用法
  • 安装UV(一个python工具)
  • C语言符号可见性控制与工程实践——深入理解 __attribute__((visibility)) 和 -fvisibility=hidden
  • 【bug】Yolo11在使用tensorrt推理numpy报错
  • 在线教育培训课程视频如何防下载、防盗录？
  • Java(LinkedList和ArrayList底层分析)
  • UML中的多重性详解
  • 【QT常用技术讲解】QSystemTrayIcon系统托盘
  • cuda做lut 去畸变示例
  • APT32F1732RBT8爱普特微电子 32位MCU国产芯片 智能家居/工业控制 首选
  • 【Word Press基础】创建一个自定义区块
  • 日语学习-日语知识点小记-构建基础-JLPT-N3阶段（7）：自動詞 ＆ 他動詞
  • Matlab学习笔记：矩阵基础
  • 鸿蒙卡片开发保姆级教程
  • 【Kubernetes】集群外使用 kubectl 命令连接集群