使用和语句(两个条件)内部反应三元运算符

Question

以下是逻辑＆amp;＆amp;如果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 />}。

-or-

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

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

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

所以想到这样的操作员：

如果条件为真＆amp;＆amp;渲染组件

您也可以执行IF-Statement：

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

您可以想到这样的操作员：

如果条件为真？渲染组件A：else渲染组件b

Answer 2

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

Answer 3

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