React测验组件：点击错误选项时如何同时高亮正误按钮？

问题描述 #

我在React测验组件中渲染选项数组，当前点击选项时，正确项显示绿色，错误项显示红色。现需求为：点击错误选项时，同时高亮显示正确选项（绿色）与被点击的错误选项（红色）。能否基于当前三元运算符逻辑实现该需求？

现有代码 #

选项数组定义 #

const textQuestions = [
  {
    alternatives: [
      { answer: "OPT1", isCorrect: false, alternative: 'A' },
      { answer: "OPT2", isCorrect: false, alternative: 'B' },
      { answer: "OPT3", isCorrect: true, alternative: 'C' },
      { answer: "OPT4", isCorrect: false, alternative: 'D' },
    ]
  }
];

选中项状态管理 #

const [selectedAlternative, setSelectedAlternative] = useState<string>();

按钮样式逻辑 #

{textQuestions[0].alternatives.map(e =>
  <Styles.Button
    onClick={() => setSelectedAlternative(e.alternative)}
    style={{
      backgroundColor:
        selectedAlternative === e.alternative ?
          e.isCorrect
            ? 'green'
            : 'red'
          : ' '
          }}>
            {e.answer}
  </Styles.Button>
)}

解决方案 #

完全可以基于三元运算符实现需求，只需要调整backgroundColor的判断逻辑，让选中错误选项时，正确项也显示绿色。修改后的样式逻辑如下：

{textQuestions[0].alternatives.map(e =>
  <Styles.Button
    onClick={() => setSelectedAlternative(e.alternative)}
    style={{
      backgroundColor: selectedAlternative ? 
        // 当有选中项时，判断两种高亮情况
        e.isCorrect ? 'green' : 
        (selectedAlternative === e.alternative ? 'red' : ' ')
      : ' ' // 未选中任何选项时保持默认
    }}>
    {e.answer}
  </Styles.Button>
)}

逻辑说明 #

1. 当selectedAlternative存在（即用户点击过选项）：
   • 如果当前选项是正确项（e.isCorrect为true），直接显示绿色
   • 如果当前选项是用户选中的错误项，显示红色
   • 其他未选中的错误项保持默认样式
2. 未选中任何选项时，所有按钮保持默认样式

这样点击错误选项时，正确项会自动高亮绿色，选中的错误项高亮红色，完全符合需求。

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