React考试应用：如何基于分数直接生成对应smileyValue变量

当然可以直接用变量/表达式实现，不用单独封装函数，这里提供几种简洁的写法：

1. 嵌套三元运算符（最直接） #

直接通过嵌套三元表达式推导对应的表情值，或者直接嵌入JSX属性中：

// 示例分数，实际替换为用户的最终分数
const userScore = 65;

// 推导smileyValue变量
const smileyValue = userScore >= 75 ? 'green' : userScore > 40 ? 'yellow' : 'red';

// 在图片组件中使用
<Img src={`../assets/images/smiley_${smileyValue}.svg`} />

也可以省去中间变量，直接把表达式写进src属性：

<Img src={`../assets/images/smiley_${userScore >=75 ? 'green' : userScore >40 ? 'yellow' : 'red'}.svg`} />

2. 对象映射配合条件判断 #

如果后续需要扩展表情类型或调整分数区间，这种方式更易维护：

const userScore = 35;
// 定义分数区间与表情的映射关系
const smileyMapping = {
  green: userScore >= 75,
  yellow: userScore > 40 && userScore < 75,
  red: userScore <= 40
};
// 筛选出符合条件的表情值
const smileyValue = Object.keys(smileyMapping).find(key => smileyMapping[key]);

<Img src={`../assets/images/smiley_${smileyValue}.svg`} />

注意事项 #

• 确保userScore是数值类型，避免因字符串比较导致逻辑错误（比如'80' >=75虽能运行，但建议提前转为数值）
• 嵌套三元运算符尽量控制在3层以内，否则可读性会下降，此时优先用对象映射方案

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