用于渲染内多个条件检查的 Eslint 规则

Question

以下代码给了我一个 eslint 错误，无论我尝试什么，都会给出错误。怎么了？

<div>
 {condition === CONDITION_ONE ||
   condition === CONDITION_TWO ||
    condition === CONDITION_THREE && (
       <Component />
 )}
</div> 

Answer 1

如果您有条件地渲染组件，则应该将布尔逻辑分组在一起：

<div>
  {(condition === CONDITION_ONE ||
    condition === CONDITION_TWO ||
    condition === CONDITION_THREE) && <Component />}
</div>