React设置按钮禁用状态：如何正确进行条件判断？

你遇到的这个ESLint报错no-unneeded-ternary，本质是因为写了多余的三元表达式——其实!brush_logs_list.length本身就已经是一个布尔值了，完全不需要用? true : false再做一次无意义的转换。

最简正确写法 #

直接把条件表达式简化成下面这样即可：

<Button 
  variant="contained" 
  className="global-button" 
  disableElevation 
  disabled={!brush_logs_list.length} 
  onClick={applyForEntireMouth}
> 
  APPLY FOR ENTIRE MOUTH 
</Button>

逻辑说明 #

JavaScript会自动把数值转为布尔值：

• 当brush_logs_list是空数组时，brush_logs_list.length等于0，!0会被转为true，按钮进入禁用状态；
• 当数组存在内容时，brush_logs_list.length大于0，!取反后得到false，按钮保持可点击状态。

可选的更语义化写法 #

如果团队更偏好直白的逻辑表达，也可以写成明确的比较式，效果完全一致：

disabled={brush_logs_list.length === 0}

这种写法语义更清晰——“当数组长度为0时禁用按钮”，两种写法都能通过ESLint检查，选你觉得更易读的就行。

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