在反应三元运算符中使用 AND 语句（两个条件）

Question

如果 this.state.isHidden 为假，下面的

是一个带有逻辑 && 运算符的内联语句，它会呈现一个组件。

<div>{!this.state.isHidden && <ShowThisComponent /> }</div>

以上行按预期工作。我的问题是我不知道如何在上面的行中添加要满足的第二个条件（例如 var1 === var2）。因此，如果 return 都为真，则显示该组件。我怎样才能做到这一点？谢谢

Answer 1

{ !this.state.isHidden && secondCondition && <ShowThisComponent /> }

Answer 2

{ (!this.state.isHidden && var1 === var2) && <ShowThisComponent /> }

Answer 3

运算符是这样工作的：

{<any boolean statement> && <Component-to-be-displayed />}.

-或-

{(<any boolean statement>) && <Component-to-be-displayed />} ...在分析布尔语句时使用括号总是一个好主意

在你的情况下它看起来像这样：

(!this.state.isHidden && var1 === var2) && <Component-to-be-displayed />

所以想像这样的运算符：

如果条件为真 && 渲染组件

您还可以执行 if 语句：

{(<any boolean statement>) ? <Component-to-be-displayed-if-true /> : <Component-to-be-displayed-if-false /> }

你可以这样想这个运算符：

如果条件为真？渲染组件 A : 否则渲染组件 B

Utilizing AND statement (two conditions) inside react ternary operator