如何在JavaScript中为多条件场景正确使用三元运算符？

首先，你修正拼写后的代码其实可以正常工作，但可以通过以下几种方式优化，让代码更简洁、易维护：

方式一：将特殊值整合到映射对象中 #

把red对应的图标直接加入映射对象，无需额外的三元判断，逻辑更集中：

const custom_icon = 'icon2';

const status_color_to_icon_name = {
    white: 'info',
    orange: 'major',
    red: custom_icon // 新增red的映射
}

const default_icon_name = 'icon1';

<Icon 
  name={status_color_to_icon_name[item.color] ?? default_icon_name} 
  color={item.color} 
/>

这种方式的优势是后续新增其他颜色规则时，只需在映射对象中添加键值对，无需修改JSX中的逻辑，维护成本更低。

方式二：简化条件判断（无需额外的&&） #

如果custom_icon需要单独定义（比如有其他关联逻辑），可以简化判断逻辑：

const custom_icon = 'icon2';

const status_color_to_icon_name = {
    white: 'info',
    orange: 'major',
}

const default_icon_name = 'icon1';

<Icon 
  name={item.color === 'red' ? custom_icon : status_color_to_icon_name[item.color] ?? default_icon_name} 
  color={item.color} 
/>

当item.color为undefined时，item.color === 'red'会返回false，此时status_color_to_icon_name[undefined]为undefined，??运算符会自动返回default_icon_name，完全满足需求，不需要额外的item.color &&判断。

方式三：抽离逻辑到函数中（推荐复杂场景） #

如果后续条件会更复杂，建议将图标名称的判断逻辑抽离成单独函数，让JSX更简洁：

// 抽离逻辑函数
const getIconName = (color) => {
  if (color === 'red') return 'icon2';
  const iconMap = {
    white: 'info',
    orange: 'major',
  };
  return iconMap[color] ?? 'icon1';
};

// JSX中直接调用函数
<Icon name={getIconName(item.color)} color={item.color} />

这种写法让逻辑和视图分离，代码可读性更强，也方便后续扩展或修改规则。

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