引言
在 React 开发中，根据应用的状态（State）或属性（Props）来条件性地渲染不同的 UI 元素是一项极其常见的任务。你不会总是希望所有的组件和内容都一次性全部显示出来。例如，用户登录后显示注销按钮，数据加载时显示旋转图标，或者表单验证错误时显示提示信息，这些都需要用到条件渲染。
JSX 虽然看起来像 HTML，但它本质上是 JavaScript 的语法扩展。这意味着我们可以在 JSX 中直接嵌入强大的 JavaScript 表达式，包括逻辑运算符和三目运算符，来实现精巧的内联条件渲染。本文将深入探讨四种主流的内联条件渲染方法，通过丰富的代码示例和流程图，帮助你彻底掌握这一核心技能。
一、基础回顾：JSX 中的 JavaScript 表达式
在深入条件渲染之前，必须牢记一个 JSX 的核心特性：你可以在 JSX 中使用一对花括号 {} 嵌入任何有效的 JavaScript 表达式。
jsx
const name = 'John Doe';
const element = <h1>Hello, {name}</h1>; // 嵌入变量
const user = { firstName: 'Jane', lastName: 'Doe' };
const element2 = <p>Fullname: {user.firstName + ' ' + user.lastName}</p>; // 嵌入表达式
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const element3 = <p>Fullname: {formatName(user)}</p>; // 嵌入函数调用条件渲染的所有技巧，都建立在通过 {} 在 JSX 中嵌入 JavaScript 逻辑的基础之上。
二、方法一：逻辑与运算符 (&&)
这是最常用、最简洁的条件渲染方式之一，尤其适合需要根据某个条件决定是否渲染一个元素的情况。
2.1 工作原理
&& 是逻辑与运算符。在 JavaScript 中，它的工作原理是：
- 如果第一个操作数（条件）为 truthy（真值），则返回第二个操作数。
- 如果第一个操作数为 falsy（假值），则直接返回第一个操作数（不会继续计算第二个操作数）。
React 会忽略 true, false, null, undefined 等渲染内容，它们不会被显示在页面上。利用这个特性，我们可以实现条件渲染。
2.2 代码示例
jsx
function Mailbox({ unreadMessages }) {
return (
<div>
<h1>Hello!</h1>
{/* 如果 unreadMessages 大于 0，则渲染 <p> 标签 */}
{unreadMessages.length > 0 && (
<p>
You have {unreadMessages.length} unread messages.
</p>
)}
</div>
);
}
// 使用组件
// 情况1: 有未读消息 -> 显示提示
<Mailbox unreadMessages={['Meeting @ 10am', 'Lunch invite']} />
// 情况2: 无未读消息 -> 不显示任何提示
<Mailbox unreadMessages={[]} />2.3 流程解析
下图清晰地展示了使用 && 运算符进行条件渲染的逻辑判断流程：
e.g. unreadMessages.length > 0}; B -- 是 --> C[返回右侧的JSX元素
并渲染]; B -- 否 --> D[返回条件本身(falsy值)
React忽略渲染]; C --> E[UI显示内容]; D --> E;
2.4 重要注意事项
警惕数字 0！ 因为 0 是一个 falsy 值，但有时它可能是一个有效的、需要渲染的值。
jsx
function Counter({ count }) {
return (
<div>
{/* 如果 count 为 0，这里会渲染数字 0 */}
{count && <h2>Current count: {count}</h2>}
</div>
);
}
// 调用 <Counter count={0} /> 时：
// count (0) 是 falsy，所以表达式 `0 && ...` 返回 0。
// React 会渲染一个数字 0 在页面上，这可能不是我们想要的！
// 正确的写法：确保条件总是返回布尔值
{count > 0 && <h2>Current count: {count}</h2>} // 使用比较运算符
{!!count && <h2>Current count: {count}</h2>} // 或转换为布尔值三、方法二：三目运算符 (? : )
当你需要根据条件在两种组件或内容之间二选一进行渲染时，三目运算符是最理想的选择。
3.1 工作原理
condition ? exprIfTrue : exprIfFalse
- 如果
condition为 truthy，则返回exprIfTrue。 - 如果
condition为 falsy，则返回exprIfFalse。
3.2 代码示例
jsx
function LoginStatus({ isLoggedIn }) {
return (
<div>
{/* 根据 isLoggedIn 的值决定渲染哪个按钮 */}
{isLoggedIn ? (
<button onClick={() => alert('Logging out...')}>Logout</button>
) : (
<button onClick={() => alert('Logging in...')}>Login</button>
)}
<br />
{/* 也可以用于渲染文本 */}
<b>The user is {isLoggedIn ? 'currently' : 'not'} logged in.</b>
</div>
);
}
// 使用组件
<LoginStatus isLoggedIn={true} /> // 显示Logout按钮
<LoginStatus isLoggedIn={false} /> // 显示Login按钮3.3 流程解析
三目运算符的逻辑是一个完整的分支判断，其流程如下：
e.g. isLoggedIn}; B -- 是 --> C[返回第一个表达式的结果
（真值分支）]; B -- 否 --> D[返回第二个表达式的结果
（假值分支）]; C --> E[渲染真值分支的JSX]; D --> E;
四、方法三：立即执行函数 (IIFE)
虽然不如前两种方法常见，但在 JSX 中嵌入立即调用函数表达式（IIFE） 可以让你在渲染时执行更复杂的逻辑，包括条件判断、循环等。
4.1 工作原理
IIFE (Immediately Invoked Function Expression) 即定义后立即执行的函数。你可以在函数体内编写任意复杂的 JavaScript 语句，最后返回需要渲染的 JSX。
4.2 代码示例
jsx
function Notification({ messages, isAdmin }) {
return (
<div>
<h2>Notifications</h2>
{(() => {
// 可以在这里写复杂的逻辑
if (messages.length === 0) {
return <p>No new messages.</p>;
}
// 多重条件判断
if (isAdmin) {
return (
<div>
<p>Admin Alert: You have {messages.length} critical system messages.</p>
<ul>{messages.map((m, idx) => <li key={idx}>{m}</li>)}</ul>
</div>
);
} else {
return (
<p>You have {messages.length} new message(s).</p>
);
}
})()}
</div>
);
}4.3 何时使用
- 优点： 灵活性极高，可以处理非常复杂的渲染逻辑。
- 缺点： 在 JSX 中嵌入大段逻辑会影响可读性。
- 建议： 通常，更好的做法是将复杂逻辑抽离到组件函数顶部或单独的函数中。IIFE 更适合用于快速原型或逻辑相对独立且简单的场景。
jsx
// 更推荐的写法：将逻辑抽离到函数顶部
function Notification({ messages, isAdmin }) {
let content;
if (messages.length === 0) {
content = <p>No new messages.</p>;
} else if (isAdmin) {
content = (...);
} else {
content = (...);
}
return (
<div>
<h2>Notifications</h2>
{content}
</div>
);
}五、方法四：使用变量与 if 语句
这是最基础、最直观的方法。在组件的函数体内部，使用 if 语句或 switch 语句将条件逻辑计算结果赋值给一个变量，最后在 JSX 中引用这个变量。
5.1 工作原理
在 JSX return 语句之前，你可以像编写普通 JavaScript 一样编写逻辑，根据条件将需要渲染的 JSX 赋值给变量。
5.2 代码示例
jsx
function Greeting({ user, isMorning }) {
// 1. 使用变量存储JSX元素
let greetingText;
// 2. 使用独立的if/else逻辑进行赋值
if (user) {
greetingText = <span>Hello, <b>{user.name}</b>!</span>;
} else {
greetingText = <span>Hello, stranger!</span>;
}
// 可以有多组逻辑
let timeOfDayBadge;
if (isMorning) {
timeOfDayBadge = <span style={{ color: 'orange' }}>🌅 Good Morning!</span>;
} else {
timeOfDayBadge = <span style={{ color: 'blue' }}>🌙 Good Evening!</span>;
}
// 3. 在JSX中直接嵌入变量
return (
<div className="greeting">
<p>{greetingText} {timeOfDayBadge}</p>
</div>
);
}5.3 流程解析
此方法的逻辑流程最为清晰，完全遵循代码的书写顺序：
使用if/else语句]; B --> C[根据条件为变量赋值相应的JSX]; C --> D[在return的JSX中
插入这些变量]; D --> E[React渲染变量对应的内容];
5.4 优势与适用场景
- 优势：
- 可读性极高： 逻辑和模板分离，代码结构清晰，特别适合非常复杂的条件分支。
- 易于调试： 可以在逻辑语句中轻松添加
console.log或设置断点。
- 适用场景： 当条件逻辑非常复杂，超出简单的
&&和? :表达能力时，这是首选方案。
六、总结与选择建议
| 方法 | 语法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|---|
| 逻辑与 (&&) | {condition && <Component />} |
单条件分支，条件为真时渲染，为假时不渲染。 | 极其简洁 | 需警惕0等falsy值 |
| 三目运算符 (? :) | {condition ? <CompA /> : <CompB />} |
双条件分支，二选一渲染。 | 简洁，表达力强 | 嵌套过深会降低可读性 |
| 立即执行函数 (IIFE) | {(() => { ... })()} |
复杂或多分支逻辑，需要内联完成。 | 灵活性最高 | 影响JSX可读性，不推荐常用 |
| 变量与if语句 | 在return前用if为变量赋值JSX |
最复杂的多分支逻辑。 | 可读性最好，易于调试 | 代码量稍多 |
选择指南：
- 优先考虑
&&和? :： 绝大多数内联条件渲染场景都可以用这两种方式优雅地解决。它们是 React 开发中最地道的写法。 - 逻辑复杂时抽离到函数顶部： 如果条件判断变得非常复杂，不要强行嵌套
? :或使用 IIFE。优先考虑使用变量与if语句 的方式，将逻辑放在return之前，这样可以保持 JSX 的整洁。 - 牢记
0的陷阱： 使用&&时，确保你的条件表达式返回的是布尔值，而不是一个可能为0的数字。
最终，选择哪种方法取决于具体场景和对代码可读性、可维护性的权衡。希望本指南能帮助你做出最合适的选择！