三元运算符搭配OR逻辑或条件不生效问题如何解决

问题原因 #

你写的逻辑表达式运算规则不符合JS语法要求：===运算符优先级高于||，所以cat === 'electronics' || 'jewelery'会被JS解析为(cat === 'electronics') || ('jewelery')。而非空字符串'jewelery'的布尔值恒为true，因此整个表达式无论cat取什么值，最终结果都是true，导致尺寸组件永远不会渲染。

修复方案 #

• 方案1：补全OR两侧的判断逻辑，写法如下：

  {cat === 'electronics' || cat === 'jewelery' ? '' : <Size><b>Size: </b>{size}</Size>}
  

• 方案2：如果后续需要新增不需要显示尺寸的分类，更易维护的写法是用数组的includes方法：

  {['electronics', 'jewelery'].includes(cat) ? '' : <Size><b>Size: </b>{size}</Size>}
  

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