React 条件渲染

真实页面经常需要"条件显示"：登录后显示用户名、没数据时显示空提示、满足条件才显示优惠信息。React 没有 v-if 这类指令，它直接使用原生 JavaScript 条件语法来决定渲染什么，写法更自由。

用 if / else 返回不同 JSX

组件本质是函数，可以先做判断再 return 对应的 JSX：

function Greeting({ isLogin }) {
  if (isLogin) {
    return <h1>欢迎回来，小明</h1>
  }
  return <h1>请先登录</h1>
}

isLogin 为 true 时显示欢迎语，否则提示登录，两个 return 只执行一个。

元素变量：先算好再渲染

当分支里要拼接较多内容时，先把结果存进变量，最后统一 return 渲染：

function Status({ online }) {
  let tip
  if (online) {
    tip = <span style={{ color: 'green' }}>在线</span>
  } else {
    tip = <span style={{ color: 'gray' }}>离线</span>
  }
  return <div>{tip}</div>
}

这样 JSX 结构保持扁平，逻辑集中在上方，可读性更好。

三元运算符做二选一

简单的"二选一"可以直接用三元运算符写在 JSX 里，代码更紧凑：

function Greeting({ isLogin }) {
  return <h1>{isLogin ? '欢迎回来' : '请先登录'}</h1>
}

条件为真取问号后面的值，为假取冒号后面的值。

逻辑与 && 控制显示/隐藏

需要"条件成立才显示，不成立什么都不渲染"时，用 && 短路求值最合适：

function Notice({ unread }) {
  return (
    <div>
      {unread > 0 && <p>你有 {unread} 条未读消息</p>}
    </div>
  )
}

unread 为 0 时整段表达式值为 false，React 不会渲染任何内容。

返回 null 阻止渲染

想让组件"什么都不显示"，直接 return null 即可：

function Warn({ show }) {
  if (!show) return null
  return <p className="warn">操作有风险！</p>
}

return null 的组件不会在页面上留下任何痕迹，常用于受控地隐藏某个块。

小结：条件渲染 = 用 JS 语法控制 JSX 输出。多分支用 if/return，简单二选一用三元，只显不显用 &&，彻底隐藏就 return null。