React 条件渲染怎么写：四种常用写法一次讲清

你写了一个列表页，数据没加载出来时你希望显示"加载中"，加载完再显示列表；或者根据用户是否登录，决定显示"登录按钮"还是"个人中心"。React 条件渲染就是根据运行时的数据，决定页面上"渲染哪块、不渲染哪块"的能力。本文把 if/else 提前 return、三元运算符、&& 短路、立即执行函数四种常用写法一次讲清，并重点讲清 && 短路里的 0 陷阱，让你少踩一个最常见的坑。编程狮用通俗对比帮你一次记牢。

一、react 条件渲染到底在解决什么问题

react 条件渲染，指的是组件根据某个变量的值，决定返回不同的 JSX。React 本身没有专门的"if 模板语法"，它直接复用 JavaScript 的 if、三元、逻辑运算符来表达条件，这正是它对新手友好的地方——你会的 JS 知识基本都能用上。

打个比方：条件渲染像红绿灯，路口根据"是红灯还是绿灯"决定"车走还是人走"。页面也一样，根据"登录了吗""数据来了吗"这些状态，决定"显示哪一段界面"。不懂它，你只能靠把所有内容都堆上去再手动隐藏，页面既乱又难维护。

四种写法各有适合的场景。if/else 提前 return 适合"大块互斥"的整段切换；三元运算符适合"二选一"的短小表达式；&& 短路适合"有就显示、没有就什么都不显示"；立即执行函数或抽子组件适合"条件里逻辑较复杂"的情形。理解这四种距离的取舍，你就不会一上来全用 if 了。

如果刚接触 React，建议先过一遍 React 入门教程，把 JSX 和组件返回值的概念弄明白，再回来读条件渲染会轻松很多。新手最常见的误区，是把所有分支都写进一个巨大的 return 里，用一堆样式去隐藏，结果代码又长又难读。

实际开发里，登录态、加载态、角色权限是最常见的条件来源。动手前先想清楚"到底靠哪个变量决定显示哪一块"，再去选下面的写法，思路会清晰很多，也不会一上来就堆出又长又绕的 return。

二、if/else 提前 return 最直观

当两块内容彼此互斥、且各自内容较多时，用 if/else 在 return 之前就决定好返回什么，是最清晰的写法。它把"判断"和"界面"分层，读起来像读普通逻辑。

function UserPanel({ user }) {
  if (!user) {
    return <div>请先登录</div>
  }
  if (user.isAdmin) {
    return <div>欢迎管理员 {user.name}</div>
  }
  return <div>欢迎 {user.name}</div>
}

这里先判断 user 是否存在，再判断是不是管理员，最后才是普通用户。每个分支独立成块，改哪块都不影响其他块。注意要"提前 return"，也就是命中一个分支就立刻返回，不要在最后堆一堆 else。

💡 小提示：当分支超过三个、且每个分支 UI 都很长时，与其层层 if，不如把每块抽成独立子组件，在父组件里用更短的条件去选择渲染哪个子组件。

三、三元运算符处理二选一

三元 条件 ? A : B 适合"非此即彼"的短场景，写在一行 JSX 里很紧凑。它返回的是"两个值之一"，天然适配"二选一"。

function Status({ loading }) {
  return (
    <div>
      {loading ? <span>加载中...</span> : <span>内容已就绪</span>}
    </div>
  )
}

loading 为真就显示"加载中"，否则显示"内容已就绪"。三元适合分支内容都比较短的情况。如果分支内容变长、或嵌套了三元里套三元，可读性会迅速下降，那时就该考虑换 && 或抽组件。想系统学 React 的语法与组件模型，React 官方教程 的组件章节值得对照着看。

⚠️ 注意：别把三元写成 loading ? <A/& : null 还觉得自己用了 if——这种"有就显示、没有就空"的场景，其实用下一节的 && 更地道。

四、&& 短路渲染的高频 0 陷阱

条件 && <组件> 是最常用的"有就显示"写法：条件为真才渲染后面的 JSX，为假则什么都不渲染。原理是 JavaScript 的短路求值——false && 任何 直接返回 false，React 遇到 false 就不渲染。

function Cart({ count }) {
  return (
    <div>
      {count > 0 && <span>购物车有 {count} 件</span>}
    </div>
  )
}

这里用 count > 0 做判断，没问题。真正的坑在于：当条件是数字 0 时，0 && <X> 返回的是 0，而 React 会把数字 0 当成有效内容渲染出来，于是页面上会莫名出现一个孤零零的"0"。这是新手最高频的 bug。

// 错误示范：当 count 为 0 时，页面会显示数字 0
function Bad({ count }) {
  return <div>{count && <span>共 {count} 件</span>}</div>
}

⚠️ 注意：当你的条件本身就是"可能为 0 的数字"时，务必写成 count & 0 && ... 或 count !== 0 && ...，不要直接把数字当布尔用。记住一句话：数字进 && 前，先转成明确的布尔判断。

五、四种 react 条件渲染方式怎么选不纠结

除了上面三种，当条件逻辑较复杂、又不想破坏 JSX 结构时，可以用"立即执行函数（IIFE）"在 JSX 里就地写一段完整 if/else，或者干脆把分支抽成独立子组件。IIFE 写法如下：

function Panel({ role }) {
  return (
    <div>
      {(() => {
        if (role === 'admin') return <AdminView />
        if (role === 'guest') return <GuestView />
        return <UserView />
      })()}
    </div>
  )
}

选型可以记一句口诀：整段互斥用 if/else 提前 return；二选一短表达式用三元；有就显示、没有就空用 &&（记得防 0）；逻辑复杂或要复用就用 IIFE 或抽组件。把 react 条件渲染按"分支长度与复杂度"分好类，代码自然清爽。遇到 JS 基础语法拿不准，JavaScript 速查手册 能随时帮你回查运算符细节。

总结

React 条件渲染就是根据数据决定渲染哪块界面，它复用 JavaScript 原生语法，没有额外模板规则。四种写法各有所长：if/else 提前 return 适合整段互斥，三元适合二选一，&& 适合"有就显示"，IIFE 或子组件适合复杂逻辑。

你应当带走的要点：别把所有分支堆进一个 return；&& 短路时数字 0 会被当成内容渲染，务必先转成布尔判断；分支一多就把逻辑抽到子组件。下一步建议把本文四个示例接到你自己的组件里跑一遍，尤其亲手制造一次 0 陷阱再修掉它，印象会深刻得多。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

1. 先跟着 React Redux 实战课程 在真实项目里把状态与渲染联动练熟；
2. 想看渲染底层原理，回读这篇 React 渲染原理解析笔记 补充机制；
3. 还在 Vue 和 React 之间犹豫，参考 Vue 与 React 选型笔记 的对比建议。

常见问题

Q：为什么 && 渲染时会出现数字 0？

因为 0 && X 在 JavaScript 里返回的是 0，而不是 false。React 把数字 0 当作合法内容渲染，于是页面显示"0"。修复办法是在 && 左边写明确的布尔判断，例如 count > 0 && <X/>，而不是 count && <X/>。

Q：三元运算符能无限嵌套吗？

语法上可以，但可读性会急剧下降。超过两层嵌套就建议改用 if/else 提前 return，或把每个分支抽成独立子组件，在父层用更短的条件去选择渲染哪个，代码更好维护也更好测。

Q：&& 和三元该怎么选？

简单记：要"有就显示、没有就空"用 条件 && 内容；要"非 A 即 B"两个都可能有内容用 条件 ? A : B。后者不要用 条件 ? A : null 来冒充前者，语义不清，直接用 && 更地道。