React(Next.js)中多条件控制HTML元素显隐的问题

你的问题出在逻辑运算符的优先级上，&&的优先级比||高，所以你写的代码实际执行顺序是：

category === 'ford' || (category === 'toyota' && <div>Car</div>)

这会导致只有当category是toyota时才渲染<div>Car</div>，而category是ford时，表达式结果为true，React会渲染布尔值true（页面上看不到，但逻辑不符合预期），所以看起来代码“不工作”。

下面是几种解决方法，都能避免重复HTML代码：

• 方法一：用括号包裹或条件，修正运算顺序
  把所有或条件用括号括起来，确保先判断是否满足任一条件，再决定渲染组件：

  {(category === 'ford' || category === 'toyota') &&  
     <div>Car</div>
  }
  

• 方法二：用数组includes简化多条件判断
  如果需要判断的条件很多，用数组includes会更简洁，后续新增条件只需往数组里加元素：

  {['ford', 'toyota'].includes(category) &&  
     <div>Car</div>
  }
  

• 方法三：提取条件到变量，提升可读性
  对于复杂的条件逻辑，把判断逻辑单独提取到变量中，代码更清晰，也方便复用：

  const shouldRenderCar = category === 'ford' || category === 'toyota';
  
  {shouldRenderCar && <div>Car</div>}
  

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