Reactjs 这对于JSX是什么样的条件呈现？

这个概念叫什么？我如何理解它

        {!auth.loading && user === auth.user._id && (
          <button type="button" className="btn btn-danger">
            <i className="fas fa-times"></i>
          </button>
        )}

{！auth.loading&&user==auth.user.\u id&&(
)}

---

我的猜测是“如果auth未加载，并且user等于auth.user，则显示按钮”，但为什么？双符号AND的含义是什么？

在AND运算符的情况下，表达式将一直求值，直到其中一个条件求值为false，因为结果始终为false，与其他条件无关

表达式将从左到右求值，即，一旦任何子表达式求值为false，表达式的求值将停止

JSX将在以下情况下呈现：

auth.load

为false

及

user==auth.user.\u id

为true

您可以将条件呈现理解为：

(first expression) && (second expression) && JSX

如果第一个表达式的计算结果为false，则不会进行进一步的计算，因为

&

运算符的一个操作数的计算结果已为false

类似地，若第一个表达式的计算结果为true，但第二个表达式为false，则不会呈现JSX

如果第一个表达式的计算结果为true，第二个表达式的计算结果也为true，则

true&&true&&JSX

将计算结果为

JSX

有关详细信息，请参阅React文档部分。

双符号（

&&&

）表示

您提供的代码使用短路评估来确定是否渲染

按钮。要简化代码，如果
auth.load
为false且
user===auth.user.\u id
为true，则将呈现
按钮

有关使用逻辑AND运算符进行短路评估的更多详细信息

表达式1和表达式2

在上述情况下，如果
表达式1
为falsy，则不会计算
表达式2
，因为无论
表达式2
的计算结果是否为true或false，组合表达式的结果都将为
false
，因为这两个表达式都需要为true才能使组合表达式的计算结果为true

例如


const funcOne=（）=>{console.log（'called funcOne'）；返回false；}
const funcTwo=（）=>{console.log（'called funcTwo'）；返回true；}
log（funcOne（）和&funcTwo（））；
//在上述情况下，不会调用funcTwo，因为
//表达式funcOne（）&&funcTwo（）的第一部分
//计算结果为false（funcOne的返回值为false）
表示
和
。一些REPL实验会立即解释这一点，例如，
“truthy”&&“more truthy”&“wat”
。它是一种简写符号，便于JSX中的简单表达式使用。（虽然我个人会提取表达式的前两部分。）该链接只是基本运算符。我知道布尔语，我只是从来没有见过它这样写出来，在&&之后执行了什么，或者returned@mastercool逻辑表达式总是这样；结果是满足条件的最后一个被评估的东西，正如我在第一篇评论中对MDN或REPL示例所解释的。