React 条件判断

JSX 里没有 if 标签，「这块内容显不显示、显示哪一个」完全由 JavaScript 表达式决定。把条件判断写对，代码既短又清晰；写错则容易出现页面闪 0、内容串位等怪问题。本节总结 React 中最常用的几种判断写法与易错点。

if/else：写在 return 之前

if 是语句而不是表达式，不能直接写进 JSX 的花括号里。常规做法是提前 return 分支，或先用 if 计算好变量。

function Greet({ user }) {
  // 登录拦截：未登录直接返回提示
  if (!user) {
    return <p>请先登录后再查看</p>;
  }
  return <h1>欢迎回来，{user.name}</h1>;
}

三元运算符：二选一

两个分支都要渲染、条件又不复杂时，三元表达式最合适，可以直接嵌在 JSX 中。

function Message({ count }) {
  return (
    <p>
      {count > 0 ? `你有 ${count} 条新消息` : '暂无新消息'}
    </p>
  );
}

逻辑与 &&：只在条件成立时渲染

当「不成立就什么都不渲染」时，用 && 最简洁：左侧为真才渲染右侧内容。

function Badge({ unread }) {
  return (
    <div>
      {unread > 0 && <span className="dot">{unread}</span>}
    </div>
  );
}

注意：&& 左侧是 0、空字符串这类「假值」时，表达式的结果就是它们本身，页面可能真的显示一个 0。因此判断数字要写成 unread > 0 && ...，而不是 unread && ...。

空值合并 ?? 与元素变量

想给可能为空的内容一个默认值，用 ??；分支较多时先把 JSX 存进变量再统一输出，可读性更好。

function Title({ title }) {
  return <h2>{title ?? '（无标题）'}</h2>;
}

function Status({ code }) {
  let content;
  if (code === 200) content = <p className="ok">请求成功</p>;
  else if (code === 404) content = <p className="warn">内容不存在</p>;
  else content = <p className="err">服务器开小差了</p>;
  return <div>{content}</div>;
}

小结

条件渲染没有新语法，本质是「JavaScript 判断 + JSX 表达式」的组合：多分支用提前 return 或元素变量，二选一用三元，只要成立才显示用 &&，补默认值用 ??。牢记 && 会把 0 渲染出来的坑，判断就稳了。