My App

与三元有关

与三元有关

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

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

我们可以使用两个 && 操作符,像这样:

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");

哪些log会被触发?顺序是什么?

仔细考虑一下,然后扩展这一部分以展示答案: