如果使用 AND 运算符

Question

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

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

如果某些东西是 false/null/Nal/undefined/""/0 那么它将 return 这个值并且不会继续下一个表达式（如预期的那样）
如果一切为真，它将 return 最后一个值
React 不会渲染 bool 就像他不会渲染 null、undefined 等一样。从那以后，如果某些东西是 false，则不会渲染任何东西，除非某些东西是 0。

是否有任何来源可以解释这个表达式？
我 missed/wrong 在做什么？

Answer 1

那就是logical AND operator.它的工作原理很简单。

注意如果左边的表达式为真，only 中右边的表达式是如何计算的。这个很重要。这意味着如果左边的操作数是假的，右边的代码永远不会执行。这叫做short circuit evaluation.

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

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

链接时你可以这样想：Return第一个虚假值，如果nonereturn最后一个值。

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 因为所有值都是真实的，所以最后一个值是 returned。

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

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

这是可行的，因为 React 不会渲染大多数*虚假值，所以如果 currentUser 是 false，那么整个表达式的计算结果为 { false }，它不会渲染任何东西。

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

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

Answer 2

当然，这叫做条件渲染，它在 React 上 documentation

如果你有很多构成条件的字段，我建议将它们提取到一个函数中以提高可读性：

const shouldRenderX = () => aField && aFunc() && aVal > another;
...
{ shouldRenderX() && <X>... }

if with AND operator