p5.js 圆弧的用法
在 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 = useState(false);
// 用if/else判断条件，返回不同JSX
if (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 = useState(75);
return (
<p>你的成绩：{score}</p>
{/* 三元运算符直接写在JSX中 */}
<p>{score >= 60 ? '恭喜，及格了！' : '抱歉，未及格'}</p>
);
}适用场景：
[*]简单的二选一判断（是 / 否、大于 / 小于等）
[*]需要在 JSX 中直接嵌入条件逻辑
优点：简洁，可直接嵌入 JSX；适合简单条件。
缺点：条件复杂时可读性差（不建议嵌套三元运算符）。
3. 逻辑与 (&&) 运算符：满足条件才渲染元素
当你需要 "条件满足时显示某个元素，不满足时不显示"（而不是显示另一个元素），可以用&&运算符。
import { useState } from 'react';
function Notification() {
const = useState(3);
return (
<h2>消息中心</h2>
{/* 当unreadCount > 0时，显示小红点和数量 */}
{unreadCount > 0 && (
{unreadCount}
)}
);
}原理：
JavaScript 中，true && expr会返回expr，false && expr会返回false，而 React 会忽略false的渲染。
注意：
[*]避免用 0 作为条件值，因为0 && ...会渲染 0（而非不渲染）。
解决：unreadCount > 0 && ...（明确返回布尔值）。
适用场景：
[*]条件满足时渲染某个元素，不满足时不渲染（单分支）
[*]简单的 "存在即显示" 逻辑（如未读消息、提示标签）
4. 元素变量：先存后用，适合多条件
先将不同条件对应的 JSX 赋值给变量，再在 return 中使用变量。适合多条件分支场景。
import { useState } from 'react';
function UserRole() {
const = 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 (
<h2>用户权限</h2>
{roleDesc} {/* 使用变量 */}
);
}适用场景：
[*]多个条件分支（3 个及以上）
[*]需要在渲染前对元素进行额外处理（如添加样式、绑定事件）
优点：逻辑清晰，变量名可增强可读性；避免 JSX 中混入大量条件判断。
5. switch-case 语句：多分支条件的规范写法
当条件分支较多（如根据不同状态码显示不同提示），用switch-case比if/else更整洁。
import { useState } from 'react';
function StatusMessage() {
const = 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 (
<h2>操作状态</h2>
{getMessage()} {/* 调用函数返回结果 */}
);
}适用场景：
[*]多个固定值的条件分支（如状态码、类型标识）
[*]需要明确 "默认情况"（default分支）的场景
优点：结构清晰，比多个if/else if更易维护；强制考虑默认情况。
6. 自定义条件组件：封装复用条件逻辑
如果多个组件需要相同的条件渲染逻辑，可以封装成自定义组件，提高复用性。
// 封装一个"权限控制组件"
function WithPermission({ permission, children, fallback = null }) {
// 模拟权限判断逻辑（实际项目可能更复杂）
const hasPermission = checkUserPermission(permission);
// 有权限则显示children，否则显示fallback
return hasPermission ? children : fallback;
}
// 模拟权限检查函数
function checkUserPermission(permission) {
const userPermissions = ['read', 'edit']; // 假设用户拥有的权限
return userPermissions.includes(permission);
}
// 使用示例
function Dashboard() {
return (
<h1>控制台</h1>
{/* 所有用户可见 */}
<p>欢迎来到控制台</p>
{/* 仅有权限'edit'的用户可见 */}
<WithPermission permission="edit" fallback={<p>无编辑权限</p>}>
<button>编辑内容</button>
</WithPermission>
{/* 仅有权限'delete'的用户可见（无权限时不显示） */}
<WithPermission permission="delete">
<button>删除内容</button>
</WithPermission>
);
}适用场景：
[*]多个组件需要相同的条件逻辑（如权限控制、角色判断）
[*]条件逻辑较复杂，需要集中维护
优点：逻辑复用，减少重复代码；组件职责单一，更易测试。
7. 动态导入 + Suspense：按需加载组件（React 18+）
对于大型应用，可根据条件动态导入组件（未满足条件时不加载组件代码），配合Suspense显示加载状态。
import { Suspense, useState, lazy } from 'react';
// 动态导入组件（只在需要时加载）
const PremiumFeature = lazy(() => import('./PremiumFeature'));
const FreeFeature = lazy(() => import('./FreeFeature'));
function App() {
const = useState(false);
return (
<h1>应用功能</h1>
{/* 免费功能始终显示 */}
<Suspense fallback={<p>加载免费功能中...</p>}>
<FreeFeature />
</Suspense>
{/* 付费功能仅付费用户可见，且仅在需要时加载代码 */}
{isPremium && (
<Suspense fallback={<p>加载高级功能中...</p>}>
<PremiumFeature />
</Suspense>
)}
);
}适用场景：
[*]大型应用的代码分割（减少初始加载体积）
[*]条件触发的 "重量级" 组件（如付费功能、模态框）
优点：优化性能，减少不必要的代码加载；配合 Suspense 提升用户体验。
三、条件渲染避坑的点
[*]避免渲染undefined
确保条件判断的分支都有返回值，否则可能出现undefined导致的白屏。
不好的示例：{condition && undefined}（会渲染undefined）
[*]谨慎嵌套条件
多层嵌套的三元运算符或if/else会导致代码可读性差，建议拆分为多个组件或用元素变量。
[*]注意 falsy 值的渲染
React 会渲染0、''（空字符串）等 falsy 值，而非忽略它们。
解决：用!!转为布尔值，或明确判断> 0等。
四、如何选择合适的方式？
方式适用场景优点缺点if/else复杂逻辑、多条件组合直观，适合复杂逻辑不能直接嵌入 JSX三元运算符简单二选一条件简洁，可嵌入 JSX复杂条件可读性差逻辑与 (&&)单分支（满足条件才显示）极简，适合简单判断需注意 falsy 值渲染问题元素变量多条件分支，需预处理元素逻辑清晰，易维护需额外定义变量switch-case多个固定值的分支（如状态码）结构规范，强制默认分支代码量略多自定义条件组件复用条件逻辑（如权限控制）复用性好，职责单一需要额外封装动态导入 + Suspense大型应用按需加载组件优化性能，减少初始体积需 React 18 + 支持记住：没有 "最好" 的方式，只有 "最合适" 的方式。根据条件复杂度、复用需求和项目场景选择即可。
以上就是本文的全部内容了，想了解更多React用法可以在《React中文教程》里查阅
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]