React 条件渲染

在 React 中，条件渲染是根据特定条件来决定渲染哪些内容或组件。这种技术通常用于根据应用程序的状态或用户操作来动态地显示或隐藏内容。

使用条件表达式

最简单的条件渲染方式是使用 JavaScript 的条件表达式（ternary operator）或者逻辑与（logical &&）来决定在渲染函数中返回什么内容。

使用三元表达式

function ConditionalRenderingExample({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>欢迎访问！</p>
      ) : (
        <p>请先登录。</p>
      )}
    </div>
  );
}

在这个例子中，根据 isLoggedIn 的值，渲染不同的内容。如果 isLoggedIn 为 true，则显示 "欢迎登录！"；否则显示 "请先登录。"。

使用逻辑与运算符

function ConditionalRenderingExample({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <p>欢迎访问！</p>}
      {!isLoggedIn && <p>请先登录。</p>}
    </div>
  );
}

这里使用了逻辑与运算符 &&，如果 isLoggedIn 为 true，则渲染 <p>欢迎登录！</p>；否则渲染 <p>请先登录。</p>。注意 && 只会渲染其右侧的内容，如果条件不满足，则不会渲染任何内容。

使用条件语句

在复杂的情况下，可以使用普通的 JavaScript 条件语句来进行条件渲染。

function ConditionalRenderingExample({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>欢迎访问！</p>;
  } else {
    return <p>请先登录。</p>;
  }
}

在这个例子中，根据 isLoggedIn 的值，使用 if-else 条件语句来返回不同的 JSX 元素。

使用变量控制渲染逻辑

function ConditionalRenderingExample({ user }) {
  const isAdmin = user.role === 'admin';
  return (
    <div>
      {isAdmin ? (
        <p>您是管理员：欢迎 {user.name}！</p>
      ) : (
        <p>您是普通用户：欢迎 {user.name}！</p>
      )}
    </div>
  );
}

在这个例子中，根据 user 的角色（admin 或非 admin），决定显示不同的欢迎信息。

总结

React 中的条件渲染可以通过使用 JavaScript 的条件表达式、逻辑运算符或者传统的条件语句来实现。这种灵活的渲染机制使得根据不同的状态动态地控制和更新用户界面成为可能，提升了应用程序的交互性和用户体验。