reactjs - 在react三元运算符中使用AND语句(两个条件)

Question

下面是一个内联 if，带有逻辑 && 运算符，如果 this.state.isHidden 为 false，则呈现组件。

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

上面的代码行按预期工作。我的问题是我无法弄清楚如何在上面的行中添加要满足的第二个条件(例如 var1 === var2)。因此，如果两者都返回 true，则将显示该组件。我怎样才能做到这一点？谢谢

我查看了文档 ( https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical-ampamp-operator ) 找不到答案

Answer 1

这就是运算符的工作原理:

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

-或-

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

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

(!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