与三元有关

&& 运算符允许我们在满足条件时有条件地渲染某些内容。但是如果条件不满足，我们想渲染其他内容该怎么办呢？

例如，假设我们正在构建一个管理员仪表板。如果用户已登录，我们希望渲染图表、表格和所有内容。如果他们没有登录，我们希望渲染一条简短的消息，要求他们登录。

我们可以使用两个 && 操作符，像这样：

function App({ user }) {
  const isLoggedIn = !!user;
 
  return (
    <>
      {isLoggedIn && <AdminDashboard />}
      {!isLoggedIn && <p>Please login first</p>}
    </>
  );
}

这可以工作，但有点笨重。幸运的是，我们可以使用三元运算符来帮助我们。

这看起来是这样的：

function App({ user }) {
  const isLoggedIn = !!user;
 
  return <>{isLoggedIn ? <AdminDashboard /> : <p>Please login first</p>}</>;
}

三元运算符并不新鲜；自 1996 年 Internet Explorer 3 发布以来，它就已经是 JavaScript 语言的一部分！但很长一段时间，它都是一个相当冷门的语言特性。

在 React 上下文中，它特别有用，因为它允许我们在 JSX 中嵌入 if/else 逻辑。由于三元运算符是运算符而不是语句，它可以在 JavaScript 表达式中使用。

三元运算符由三部分组成：

condition ? firstExpression : secondExpression;

如果 condition 是真值，则第一个表达式将被求值。如果它是假值，则将求值第二个表达式。

console.log("condition")
  ? console.log("first condition")
  : console.log("second condition");