三元运算符是 JSX 中实现条件渲染最自然的方式，语法为 condition ? exprIfTrue : exprIfFalse，适用于二选一内容切换和真假态 UI 替换，返回值须为合法 React 节点；不可嵌套过深，复杂逻辑应抽离到变量或函数中。
在 JSX 或现代前端模板渲染中，三元运算符是实现条件控制最常用、最自然的方式——它不是“模拟 if”，而是直接作为表达式参与渲染逻辑，天然契合 JSX 的函数式、声明式风格。
三元运算符的基本写法与适用场景
语法结构为：condition ? exprIfTrue : exprIfFalse。JSX 中只能写表达式，不能写语句（比如 if、for），所以三元运算符成了最直白的分支选择工具。
- 适合两类典型场景：二选一内容切换（如登录/登出按钮）、真假态 UI 替换（如 loading 状态 vs 正常内容）
- 返回值必须是合法的 React 元素、字符串、数字、null 或 undefined，否则会报错
- 不推荐嵌套三层以上，否则可读性骤降；复杂逻辑应提前抽离到变量或组件中
在 JSX 中的实际用法示例
以下写法都可在函数组件或 JSX 表达式中直接使用：
-
基础替换：
{isLoading ? <Spinner /> : <Content />} -
属性动态赋值：
<button disabled={isSubmitting ? true : false}>提交</button>可简写为<button disabled={isSubmitting}>提交</button>，但三元仍适用于更精细控制，例如className={isActive ? 'btn active' : 'btn'} -
空内容兜底：
{user.name ? <h2>{user.name}</h2> : <h2>游客</h2>}
三元 vs 逻辑与（&&）的关键区别
很多人混淆 && 和三元，其实它们语义不同：
立即学习“Java免费学习笔记（深入）”；
-
isLoggedIn && <p>欢迎回来</p>：只在真值时渲染，假值时渲染false（React 会忽略 false/null/undefined，视觉上“不显示”，但本质是返回了 false） -
isLoggedIn ? <p>欢迎回来</p> : <p>请登录</p>：真假路径都有明确输出，语义完整，适合必须二选一的场景 - ⚠️ 注意：
0 && <div>xxx</div>不会渲染，但0 ? <div>a</div> : <div>b</div>会走 false 分支——因为0是 falsy，但三元会明确执行冒号后的表达式
复杂条件的处理建议
当判断逻辑变多（比如 status === 'pending' || status === 'loading' || status === 'error'），不要硬塞进三元：
- 先用变量归一化状态：
const showLoading = ['pending', 'loading'].includes(status) - 再用三元：
{showLoading ? <Spinner /> : <Page />} - 或封装成小函数：
const renderStatusUI = () => { switch(status) { case 'loading': return <Spinner />; case 'error': return <ErrorTip />; default: return <Content />; } }，然后{renderStatusUI()}
