React 条件判断（完整教程）

React 条件判断：让组件根据状态动态变化

在开发 React 应用时，你一定会遇到这样的场景：页面显示的内容，要根据用户登录状态、数据加载进度、表单验证结果等条件来决定。这就是“React 条件判断”的核心作用——让 UI 能够响应数据的变化，实现动态渲染。

想象一下，你正在开发一个个人博客网站。当用户未登录时，显示“请先登录”的提示；登录后，则展示“欢迎回来，张三”的欢迎语，并显示“发表文章”按钮。这种根据状态切换界面的行为，正是 React 条件判断的典型应用。

React 条件判断不是某个特定语法，而是一套灵活的模式，帮助你用 JavaScript 的逻辑能力，控制组件的输出。接下来，我们就从最基础的写法开始，逐步深入。

使用三元运算符实现基础条件判断

三元运算符是 React 中最常用、最直观的条件判断方式。它的语法是：条件 ? 真值 : 假值，就像一个“如果-否则”开关。

function WelcomeMessage({ isLoggedIn, username }) {
  // 判断用户是否登录，决定显示哪条消息
  return (
    <div>
      {isLoggedIn ? (
        <p>欢迎回来，{username}！</p>
      ) : (
        <p>请先登录以查看内容。</p>
      )}
    </div>
  );
}

// 使用示例
<WelcomeMessage isLoggedIn={true} username="张三" />
// 输出：欢迎回来，张三！

注意：三元运算符必须用括号包裹，因为 JSX 中的条件表达式通常包含多个 JSX 元素。如果不加括号，React 会报错，因为无法识别表达式的结束位置。

三元运算符适合简单场景，比如“显示/隐藏一个按钮”、“切换文本颜色”。但当条件变复杂时，代码会变得臃肿。这时，我们可以引入更优雅的写法。

逻辑与（&&）操作符的巧妙应用

在 React 中，&& 操作符不仅能用于逻辑判断，还能用来控制组件的渲染。它的核心原理是：当左侧为真时，返回右侧表达式；否则返回左侧值（通常是 false）。

function Dashboard({ user, isPremium }) {
  return (
    <div>
      <h2>用户控制台</h2>
      {/* 只有用户存在时才渲染欢迎信息 */}
      {user && <p>欢迎回来，{user.name}！</p>}

      {/* 仅当是高级会员时，显示专属功能 */}
      {isPremium && (
        <div className="premium-section">
          <p>您拥有高级功能权限</p>
          <button>使用高级工具</button>
        </div>
      )}

      {/* 无论是否登录，都显示退出按钮 */}
      <button onClick={() => alert('已退出')}>退出登录</button>
    </div>
  );
}

// 使用示例
<Dashboard user={{ name: "李四" }} isPremium={true} />

这个写法非常巧妙：user && <p>...</p> 意味着“如果 user 存在（即真值），就渲染这段 JSX；否则不渲染任何内容”。由于 false 和 null 等值在 JSX 中不会被渲染，所以等价于“条件渲染”。

重要提醒：&& 操作符只能用于“是否显示”的场景，不能用于“显示 A 或 B”的情况，那应该用三元运算符。

多条件判断：组合使用多种方式

当需要处理多个条件时，比如“用户登录 + 是管理员 + 有权限”，就需要组合使用三元运算符和 &&。

function AdminPanel({ user, isAdmin, hasPermission }) {
  return (
    <div>
      {/* 先判断用户是否登录 */}
      {user ? (
        isAdmin ? (
          hasPermission ? (
            <div>
              <h3>管理员面板</h3>
              <p>您有权限管理所有内容。</p>
              <button>批量删除</button>
            </div>
          ) : (
            <p>您没有操作权限，请联系管理员。</p>
          )
        ) : (
          <p>您不是管理员，无法访问此页面。</p>
        )
      ) : (
        <p>请先登录以访问管理后台。</p>
      )}
    </div>
  );
}

这里我们用了嵌套三元运算符，结构清晰，逻辑分明。虽然看起来复杂，但每一步都对应一个明确的判断分支。

💡 小贴士：当条件超过 3 层嵌套时，建议拆分成独立函数，提升可读性。

抽象成独立函数，提升代码可维护性

当条件判断逻辑越来越复杂时，把判断逻辑提取成函数是个好习惯。这不仅能提高可读性，也方便测试和复用。

function getWelcomeMessage(isLoggedIn, username) {
  // 将条件判断逻辑封装成函数
  if (!isLoggedIn) {
    return <p>请先登录。</p>;
  }

  if (username.length < 2) {
    return <p>用户名太短，请设置一个完整名字。</p>;
  }

  return <p>欢迎回来，{username}！</p>;
}

function UserProfile({ user }) {
  return (
    <div>
      <h2>个人资料</h2>
      {/* 直接调用函数，返回 JSX 内容 */}
      {getWelcomeMessage(user.isLoggedIn, user.name)}
      
      {/* 其他内容 */}
      {user.email && <p>邮箱：{user.email}</p>}
    </div>
  );
}

通过这种方式，getWelcomeMessage 函数内部的逻辑与 UI 层完全分离，你可以在其他地方复用这个判断逻辑，甚至单独写单元测试。

实际应用场景：数据加载状态管理

在真实项目中，React 条件判断最常见的是用于处理异步数据加载。

function PostList({ posts, loading, error }) {
  // 根据不同状态显示不同内容
  if (loading) {
    return <p>正在加载文章...</p>;
  }

  if (error) {
    return <p style={{ color: 'red' }}>加载失败：{error}</p>;
  }

  if (posts.length === 0) {
    return <p>暂无文章。</p>;
  }

  // 正常情况：渲染文章列表
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </li>
      ))}
    </ul>
  );
}

这段代码展示了典型的“状态机”思想：根据 loading、error、posts 的状态，决定渲染什么内容。这种写法在 React 项目中极为常见，是构建健壮 UI 的基础。

这种模式不仅清晰，而且易于扩展。未来你可以加入“分页”、“刷新按钮”等功能，只需在对应分支中添加逻辑即可。

总结与建议

React 条件判断是构建动态 UI 的核心能力。从三元运算符到 && 操作符，再到函数封装与状态分层，每一步都在帮助你写出更清晰、更可维护的代码。

• 简单条件用三元运算符，逻辑清晰；
• “是否显示”用 &&，简洁高效；
• 复杂逻辑建议提取为函数，提升可读性；
• 状态管理是关键，用 loading、error、data 等字段明确区分状态；
• 别忘了添加默认状态，防止未定义值导致报错。

掌握这些技巧后，你就能轻松应对各种复杂的 UI 场景，比如表单验证、权限控制、数据加载提示等。React 条件判断不是“写代码”，而是“设计体验”。每一次条件判断，都是在告诉用户：“现在该看到什么”。

别小看这些判断，它们构成了现代 Web 应用的骨架。当你能熟练运用这些模式时，你的 React 技能就已经迈入了中级以上的水平。