10. 条件渲染

核心思路

React 的条件渲染就是 JavaScript 的条件逻辑。没有 v-if、v-show 这种特殊语法，直接用 if、?:、&&。

方法一：if/else

最基本的条件判断，在组件内部控制返回什么：

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li>{name} ✅</li>;
  }
  return <li>{name}</li>;
}

isPacked 为 true 时返回带勾选的版本，否则返回普通版本。

方法二：三元表达式 ? :

当你想在 JSX 内部做条件判断时，三元更紧凑：

function Item({ name, isPacked }) {
  return (
    <li>
      {isPacked ? name + ' ✅' : name}
    </li>
  );
}

读作：“如果 isPacked 为真，渲染 name + ' ✅'，否则渲染 name”。

三元也可以嵌套，但别超过两层：

// 勉强能读
<div>
  {status === 'loading' ? <Spinner /> :
   status === 'error' ? <Error /> :
   <Content />}
</div>

// 太复杂了，不如用 if/else 或提取成子组件

方法三：逻辑与 &&

当条件为真时渲染，为假时什么都不渲染：

function Item({ name, isPacked }) {
  return (
    <li>
      {name} {isPacked && '✅'}
    </li>
  );
}

读作：“如果 isPacked 为真，渲染 '✅'，否则不渲染”。

方法四：变量赋值

当逻辑比较复杂时，用变量保存 JSX：

function Item({ name, isPacked }) {
  let content = name;
  if (isPacked) {
    content = <del>{name} ✅</del>;
  }
  return <li>{content}</li>;
}

这种方式最灵活，也最容易维护。

返回 null 隐藏组件

如果你希望某个组件完全不渲染，可以返回 null：

function Warning({ show }) {
  if (!show) {
    return null;
  }
  return <div className="warning">警告信息</div>;
}

// 使用
<Warning show={false} />  // 什么都不渲染
<Warning show={true} />   // 渲染警告

四种方法怎么选

方法	适用场景
if/else	分支逻辑复杂，或需要提前返回
? :	JSX 内部的二选一
&&	条件为真时渲染，为假时不渲染
变量赋值	逻辑复杂，需要多次判断

实战示例：登录状态

function LoginButton({ isLoggedIn, onLogin, onLogout }) {
  if (isLoggedIn) {
    return <button onClick={onLogout}>退出</button>;
  }
  return <button onClick={onLogin}>登录</button>;
}

// 或者用三元
function LoginButton({ isLoggedIn, onLogin, onLogout }) {
  return (
    <button onClick={isLoggedIn ? onLogout : onLogin}>
      {isLoggedIn ? '退出' : '登录'}
    </button>
  );
}

// 或者用 && 组合
function ToolBar({ isLoggedIn }) {
  return (
    <div>
      <HomeLink />
      <AboutLink />
      {isLoggedIn && <DashboardLink />}
      {isLoggedIn && <LogoutButton />}
    </div>
  );
}

常见错误

错误 1：&& 左侧是数字

// 错误
{count && <p>有 {count} 条消息</p>}

// 修复
{count > 0 && <p>有 {count} 条消息</p>}

错误 2：三元的两边类型不一致

// 不推荐：一边是字符串，一边是 JSX
{isLoggedIn ? '已登录' : <LoginForm />}

// 推荐：两边都是 JSX
{isLoggedIn ? <span>已登录</span> : <LoginForm />}

错误 3：嵌套三元太深

// 难读
{x ? <A /> : y ? <B /> : z ? <C /> : <D />}

// 改用 if/else 或 switch
let content;
if (x) {
  content = <A />;
} else if (y) {
  content = <B />;
} else if (z) {
  content = <C />;
} else {
  content = <D />;
}

本节小结

• React 条件渲染用 JavaScript 原生语法
• if/else 适合复杂分支，? : 适合二选一，&& 适合”有则显示”
• && 左侧不能是数字，否则会渲染数字
• 返回 null 可以隐藏组件

下一节学列表渲染。