React数组循环渲染时如何根据接口返回的priority值动态设置背景色

你之前编写的多优先级取值代码不生效，核心原因是el.priority本身就是接口返回的字符串类型的优先级值，可选值为high/low/mild/blocker，并非挂载了这四个属性的对象，直接调用el.priority.high属于在字符串原型上读取不存在的属性，返回值永远是undefined，自然无法触发预期样式。

你可以选择以下两种方式实现需求：

• 三元嵌套判断：适合样式规则极少的简单场景，直接在行内样式中做值判断返回对应颜色

<a style={{
  background: el.priority === 'high' ? 'red'
            : el.priority === 'low' ? 'green'
            : el.priority === 'mild' ? 'orange'
            : el.priority === 'blocker' ? 'crimson'
            : '#eee' // 兜底默认色，避免接口返回异常值时样式错乱
}}>
  {el.priority}
</a>

• 映射表配置（推荐）：把优先级和对应颜色的对应关系抽离为独立配置对象，后续新增优先级、修改颜色时不需要改动JSX结构，可维护性更强

// 优先级-颜色映射配置，可统一维护
const PRIORITY_BG_MAP = {
  high: 'red',
  low: 'green',
  mild: 'orange',
  blocker: 'crimson'
}

// 组件内直接读取配置即可
<a style={{ background: PRIORITY_BG_MAP[el.priority] || '#eee' }}>
  {el.priority}
</a>

你可以根据自己项目的实际场景，给mild、blocker两个优先级配置符合设计要求的背景色。

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