我不明白这个 JavaScript (JSX) 语法中的 && [重复]答案

【问题标题】：I don't understand && in this JavaScript (JSX) Syntax [duplicate]我不明白这个 JavaScript (JSX) 语法中的 && [重复]
【发布时间】：2020-12-04 18:30:07
【问题描述】：

我的理解是&& 是一个“与”运算符。代码块中&& 后面的内容如何返回布尔值？

{accounts.length > 0 && (
        <View>
          {accounts.map((account) => (
            <AccountListItem
              key={account.mask}
              account={account}
              selectedAccount={selectedAccount}
              setSelectedAccount={setSelectedAccount}
            />
          ))}
        </View>
  )}

【问题讨论】：

它不返回布尔值，它返回一个元素。
也就是说如果accounts.length > 0 则执行下面的代码，就像一个简写的if语句
它返回一个元素，如果元素存在则为真
仅供参考：虽然使用&& 有效，但如果条件为false，通常建议使用显式返回null 的三元组。虽然我不记得推理...
@Slbox 你不能使用accounts.length && <View />，因为即使0 是假的，它也会呈现为“0”（数字被转换为字符串；<>before{0}after</> 呈现“before0after”） .不过，除了样式偏好之外，没有特别的理由不使用 accounts.length > 0 && <View />。

标签： javascript reactjs jsx

【解决方案1】：

（如果这部分为真）&&（这部分将执行）

Conditional Rendering

【讨论】：

【解决方案2】：

expr1 && expr2works like this:

如果expr1可以转换为true，则返回expr2；否则，返回 expr1。

expr1 是accounts.length > 0。

如果这是false，则无法转换为true，因此整个表达式的计算结果为false。
否则为true，因此整个表达式的计算结果为expr2，在我们的例子中是View 组件。

在 React 中，false 什么都不渲染。您可以使用以下最小示例来验证这一点：

const Test = () => <>before{false}after</>

ReactDOM.render(<Test />) // renders as "beforeafter"

换句话说，在我们的示例中，如果accounts.length 为0，则返回false，不渲染；否则，将返回一个 View，并进行渲染。

【讨论】：

有趣。为什么我不只使用常规控制流？
您能解释一下“常规控制流”是什么意思吗？如果您的意思是 if 语句，则不能在反应组件渲染逻辑中使用它们。如果您的意思是三元运算符，当然可以使用它，但这种方式更简洁。

【解决方案3】：

如果 left 返回 false，对于 && 表达式将不会计算右侧，因此这是执行以下操作的捷径：

{accounts.length > 0 ? (
    <View>
      {accounts.map((account) => (
        <AccountListItem
          key={account.mask}
          account={account}
          selectedAccount={selectedAccount}
          setSelectedAccount={setSelectedAccount}
        />
      ))}
    </View>
):""}

【讨论】：

【解决方案4】：

逻辑运算符是短路的，因此如果 and 语句表达式的左侧为假，则不计算右侧。这是一种执行 if 的方式。

【讨论】：

【解决方案5】：

JavaScript 中的所有内容都可以强制转换为布尔值。

但是，这并不重要。表达式的结果在() 内部，与所采取的操作无关。

accounts.length > 0 && 是一种短路方法，以确保仅在帐户存在时才执行以下操作，大概是因为使用了map。

对() 内部的表达式求值会导致<View> 被渲染，并且从未实际使用过该表达式的求值结果，因此无论它被强制转换成什么，它都不会产生任何影响。

【讨论】：

JavaScript 中的所有内容都可以被认为是真或假，但这并不意味着强制转换为布尔值。
@AdrianBrand - 是的，这就是字面意思。请参阅MDN's definition of truthy。