React组件基于selectedID的嵌套条件样式设置问题

你之前的代码逻辑存在两个核心问题：

1. 条件顺序错误：第一个条件selectedID <4会匹配1、2、3，导致后面的所有条件都不会被执行
2. 逻辑判断错误：类似selectedID <3 || selectedID>2这种表达式等价于true（除了selectedID=2，但前面的条件已经覆盖了大部分情况），完全起不到区分不同selectedID的作用

下面是两种更清晰可靠的实现方式：

方式一：使用映射对象（推荐，易维护、易扩展） #

把selectedID和对应的颜色做成键值对，直接通过键取值，逻辑一目了然：

// 先定义颜色映射
const bgColorMap = {
  1: '#ffe5e5', // 粉色
  2: '#65bb2c', // 绿色
  3: '#414c97', // 深蓝色
  4: 'yellow'   // 黄色
};

// 组件中使用
<InformationContainer
  style={{ backgroundColor: bgColorMap[selectedID] || 'white' }}
>
  {/* 内容 */}
</InformationContainer>

• 当selectedID不在1-4范围内时，会默认使用white
• 如果后续要增加更多ID对应的颜色，只需要在bgColorMap里添加新的键值对即可

方式二：使用switch语句 #

如果需要更复杂的判断逻辑，switch语句也是不错的选择：

const getBgColor = (id) => {
  switch(id) {
    case 1:
      return '#ffe5e5';
    case 2:
      return '#65bb2c';
    case 3:
      return '#414c97';
    case 4:
      return 'yellow';
    default:
      return 'white';
  }
};

// 组件中使用
<InformationContainer
  style={{ backgroundColor: getBgColor(selectedID) }}
>
  {/* 内容 */}
</InformationContainer>

方式三：修正后的三元表达式（不推荐，嵌套过深不易读） #

如果一定要用三元，需要调整条件顺序，从具体到宽泛：

<InformationContainer
  style={{ 
    backgroundColor: 
      selectedID === 1 ? '#ffe5e5' :
      selectedID === 2 ? '#65bb2c' :
      selectedID === 3 ? '#414c97' :
      selectedID === 4 ? 'yellow' :
      'white'
  }}
>
  {/* 内容 */}
</InformationContainer>

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