Javascript 当映射出一个组件时，是否有一种方法触发一个事件，以便它仅将样式应用于该特定组件？

我正在开发一个测验应用程序，我已经规划了一些组件，当用户单击答案时，它只会突出显示他们单击的答案，但到目前为止，我只需要在hover上工作，或者只对每个人应用它

导出默认函数测验（）{
const[currentQuestion，setCurrentQuestion]=useState（4）；
常量[currentAnswer，setCurrentAnswer]=useState（“”）；
常量handleClick=e=>{
setCurrentAnswer（即目标值）；
};
常量问题=测验。问题[当前问题]；
返回(
确认并继续
);
}

功能应答（道具）{
让类=[“答案”]；
如果（选择道具）{
类。推送（“选定”）；
}
console.log（props.selected）；
console.log（classes.join（“”）；
返回(
{props.letter}
{props.answer}
);
}

功能答案（道具）{
返回(
{props.question.options.map（（e，index）=>{
常数答案=指数+1；
返回(
);
})}
);
}

---

到目前为止，我的项目就是这样设置的，并且已经被这个问题困扰了一段时间了

只要做一个平等性检查就可以了

类似于

selected={props.currentAnswer==answer}

您只需跟踪选择的答案并设置逻辑，以便您的答案组件知道它已被选中。如果selected为true，您已经在执行添加

selected

classname的检查

---

编辑：侧注：别忘了向映射元素添加

key

props！：D阅读文档了解原因。

我在使用

selected={props.currentAnswer===index+1}

之前的做法，但它只在hover上工作，在单击时没有停留。我要试着那样做。提前谢谢你的帮助