时间戳

首页 > 解决方案 > 如果使用 AND 运算符

reactjs - 如果使用 AND 运算符

问题描述

我正在学习反应，我遇到了下一个表达
ReactDOM.render(true && 123 && <functionThatReturnBool> && "foo")

我试着研究了一下，没有找到太多的来源，所以我稍微玩了一下代码，这就是我想出的：

有什么资料可以解释这个表达吗？
我错过/错了？

标签： reactjsif-statementoperators

解决方案

那是逻辑与运算符。它的工作原理非常简单。

  1. 计算左边的表达式。
  2. 如果左边表达式的值是假的
    • 返回左侧表达式的值。
  3. 别的
    • 计算并返回右侧表达式的值。

请注意，仅当左侧的表达式为真时，右侧的表达式才被评估。这个很重要。这意味着如果左边的操作数是假的，右边的代码永远不会执行。这称为短路评估。

这对于仅在某些值是真实的情况下才做某事非常方便。

// someAction will only be executed if condition is true.
condition && someAction()

当被链接时，你可以这样想：返回第一个假值，如果没有返回最后一个值。

const a = 1
const b = 0
const c = 'qwerty'
const foo = a && b && c && 'test'

在这个例子foo中是0，因为这是链中的第一个假值。

但是，在这段代码中：

const a = 1
const b = 2
const c = 'qwerty'
const foo = a && b && c && 'test'

foo是test因为所有值都是真实的，所以返回最后一个值。

在 React 中，它通常用于有条件地渲染组件。例如：

{ currentUser && hasAccessToContactInfo && <ContactInfo user={currentUser} /> }

这是有效的，因为 react 不会呈现大多数 * 虚假值，所以如果currentUseris false，那么整个表达式的计算{ false }结果不会呈现任何东西。

这很好，因为它允许在普通 javascript 中有意义的模式在 React 渲染中也有意义。

* React 肯定会呈现0为文本节点，这是有道理的。它也可能将''（空字符串）呈现为空文本节点。但是大多数对渲染没有意义的虚假值会像您期望的那样被忽略。

推荐阅读