React中如何实现条件渲染？

写React组件时，一个最常见的场景就是根据某些条件来决定显示什么内容。用户登录没登录、数据加载没加载完、表单是编辑模式还是查看模式，这些都需要条件渲染。React提供了好几种方式来实现，它们各有各的味道，用对了能让代码既清晰又高效。

最直接的：if语句和三元运算符

最简单的条件渲染，其实就用普通的JavaScript。在组件函数里或者render方法里，用if或者三元运算符（? :）来决定返回哪段JSX。

function UserGreeting(props) {
  if (props.isLoggedIn) {
    return <h1>欢迎回来！</h1>;
  }
  return <h1>请先登录。</h1>;
}

如果想在JSX里内联一个简单的二选一，三元运算符特别顺手。

<div>
  {isLoading ? <Spinner /> : <Content data={data} />}
</div>

这种方式非常直白，就是标准的JavaScript逻辑。但如果你有好几个分支条件，一堆if-else或者嵌套的三元运算符会让代码看起来有点乱。

与运算符 && 的妙用

当你需要“某个条件成立时才渲染，否则什么都不渲染”时，逻辑与运算符&&是你的好帮手。

<div>
  {unreadMessages.length > 0 && (
    <h2>您有 {unreadMessages.length} 条未读消息。</h2>
  )}
</div>

这里React会先判断unreadMessages.length > 0，如果是true，它就渲染后面的<h2>；如果是false，React就忽略整个表达式，什么都不渲染。注意，如果条件是数字0，它也会被渲染出来，这是个小坑，要确保条件表达式最终是布尔值。

让JSX更整洁：早点return或者抽离子组件

有时候条件太复杂，硬塞在JSX里会很难读。一个实用的技巧是，在组件函数的顶部就用if语句处理特殊情况并提前返回。

function MainContent(props) {
  if (!props.data) {
    return <ErrorMessage />;
  }
  if (props.data.isEmpty) {
    return <EmptyState />;
  }
  // 正常情况的渲染逻辑
  return <DataView data={props.data} />;
}

另一种高级做法是把不同分支的UI拆成独立的子组件，然后用条件逻辑来决定渲染哪个组件。这样主组件保持干净，每个子组件也只关心自己的那块UI。

元素变量：把JSX先存起来

你还可以先把JSX赋值给变量，然后再根据条件修改变量，最后在return语句里渲染这个变量。这在有多个条件分支时，有时能让结构更清晰。

let button;
if (isLoggedIn) {
  button = <LogoutButton onClick={handleLogoutClick} />;
} else {
  button = <LoginButton onClick={handleLoginClick} />;
}
return <div>{button}</div>;

说到底，React的条件渲染就是把JavaScript的逻辑判断能力用到了JSX上。没有太多魔法，关键是根据场景选择最清晰、最容易维护的那种写法。简单的判断就用&&或三元组，复杂的多分支就考虑早点返回或者拆分子组件，保持代码的可读性总是最重要的。