React：如何为逻辑&&运算符的内联判断添加第二个条件？

嗨，这个需求其实很容易实现！你只需要把两个条件用&&运算符串联起来就可以了——React的内联条件渲染完全支持多逻辑判断，因为&&是短路求值规则：只有前面所有条件都为true时，才会执行/渲染后面的内容。

最简洁的写法 #

直接把两个条件连在一起就行，代码逻辑一目了然：

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

提升可读性的优化写法 #

如果觉得多个条件堆在一起不够清晰，也可以用以下两种方式优化：

方式1：提前定义判断变量

把条件逻辑抽离出来单独定义，让JSX部分更简洁：

// 在render方法（或函数组件主体）里先定义判断逻辑
const shouldRenderComponent = !this.state.isHidden && var1 === var2;

// 再在JSX中使用变量判断
<div>
  {shouldRenderComponent && <ShowThisComponent />}
</div>

方式2：用括号包裹条件

如果不想额外定义变量，也可以用括号把两个条件包起来，明确逻辑分组：

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

原理小说明 #

&&运算符会从左到右依次校验每个条件：

1. 先检查!this.state.isHidden是否为true
2. 若第一个条件成立，再校验var1 === var2是否为true
3. 只有两个条件同时满足时，才会渲染<ShowThisComponent />；只要有一个条件不成立，整个表达式就会返回false，组件不会被渲染

这样就完美实现了你要的「两个条件同时为true才渲染组件」的需求啦！

内容的提问来源于stack exchange，提问作者zamzam