React中如何通过函数根据数值设置元素背景色？

问题场景 #

需要根据0-100的数值为Div设置三种背景色：0-29为红色，30-69为黄色，70-100为绿色。原实现方式是定义样式对象并通过函数返回对应对象，却遇到类型错误：

Type '{ backgroundColor: string; }' is not assignable to type 'BackgroundColor | undefined'

错误原因 #

这个错误的核心是类型不匹配：你定义的BackgroundColor类型应该仅接受字符串格式的颜色值，但函数返回的是包含backgroundColor属性的对象，两者类型无法兼容。

解决方法 #

1. 修复原方案的类型兼容问题 #

如果坚持返回样式对象，需确保函数返回类型与组件style属性的预期类型一致（比如React中的CSSProperties）：

// 定义函数并指定返回类型为CSSProperties
const getDivStyle = (score: number): React.CSSProperties => {
  if (score >= 0 && score <= 29) {
    return { backgroundColor: 'red' };
  } else if (score >= 30 && score <= 69) {
    return { backgroundColor: 'yellow' };
  } else if (score >= 70 && score <= 100) {
    return { backgroundColor: 'green' };
  }
  // 处理超出0-100范围的数值，返回默认样式
  return {};
};

// 组件中使用
<div style={getDivStyle(yourScore)}></div>

2. 用嵌套三元运算符实现 #

可以直接在JSX中通过嵌套三元运算符生成颜色值，无需额外函数，写法更简洁：

<div 
  style={{ 
    backgroundColor: 
      score >= 0 && score <= 29 ? 'red' :
      score >= 30 && score <= 69 ? 'yellow' :
      score >= 70 && score <= 100 ? 'green' :
      'transparent' // 处理异常数值的默认颜色
  }}
></div>

3. 你发现的有效方案：直接返回颜色值 #

移除样式对象嵌套，让函数仅返回字符串格式的颜色值，直接匹配backgroundColor的类型要求，彻底避免类型错误：

const getBgColor = (score: number): string => {
  if (score >= 0 && score <= 29) return 'red';
  if (score >= 30 && score <= 69) return 'yellow';
  if (score >= 70 && score <= 100) return 'green';
  return 'transparent';
};

// 组件中使用
<div style={{ backgroundColor: getBgColor(yourScore) }}></div>

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