Conditional Rendering 条件渲染
最后更新：2026-10-28
Conditional Rendering 条件渲染
React 里没有 if 标签：条件渲染就是把 if、三元、&& 等普通 JS 逻辑写进 JSX，根据状态决定渲染哪一块 UI 或返回 null。同一组件因此能在不同情况下呈现完全不同的界面。
| 分组 | 渲染与状态 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 最早版本 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
{isLoggedIn ? <UserPanel /> : <LoginButton />} // 三元：二选一
{unread > 0 && <Badge count={unread} />} // &&：渲染或不渲染
if (!ok) return null // 提前返回：整块不渲染返回值：无返回值，作为编码约定/心智模型使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
初始显示「请先登录」和登录按钮；点登录后出现欢迎语与「你有 3 条未读消息」；再点「全部已读」，未读提示消失并显示「消息都看完啦」。💡 要点
⚠️ 注意 && 左侧是数字 0 时会把「0」渲染到页面上（0 && ... 返回 0），请先写成 unread > 0 &&。
💡 提示 分支多且复杂时，把判断逻辑提成函数或提前 return，别把 JSX 塞成一坨嵌套三元。
ℹ️ 说明 返回 null 表示组件什么都不渲染，常用于「权限不足时隐藏整个组件」。
🏷️ 渲染与状态相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q React 中条件渲染有哪几种写法？
A 常用四种：三元运算符（二选一）、&&（要么渲染要么不渲染）、提前 return、以及把分支抽成变量或函数再嵌入 JSX。
Q && 渲染出数字 0 怎么办？
A 因为 0 && x 的结果是 0 且会被渲染。把条件改成比较表达式 count > 0 && ...，或用三元写法规避。
Q if-else 能直接写在 JSX 里吗？
A 不能，花括号里只能放表达式。可以在 return 前用 if 计算变量，或在 JSX 里用三元运算符实现分支。
