反应三元运算符

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语句：

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

你可以这样想一下这个算子：

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

Answer 2

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

Answer 3

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