Css 如何在react中有条件地添加样式？

我在React中建立了一个简单的问答测验。我希望点击选项后，正确/错误答案的方框阴影变为红色或绿色。默认为灰色

在常规Js中，我会这样做，或者添加一个类，但在React中两者都不起作用

谢谢你的帮助

function handleClick(event) {
        const card = document.querySelector('card')
        if (event.target.innerText == flashcard.answer){
            card.style.boxShadow = ' 0 0 5px 2px rgba(1, 156, 48 , 0.3)'
        } else {
            card.style.boxShadow = ' 0 0 5px 2px rgba(255, 0,  0, 0.3)'
        }

---

使用React，您应该能够使用挂钩来更改组件状态

i、 e

从“react”导入{useState}；
导出默认函数ChangeColorComponent（）{
常量[颜色状态，更改颜色]=使用状态（“灰色”）；
函数changeColorByEvent（事件）{
//TODO:输入您的逻辑
更改颜色（/*您的州*/）
}
返回一些文本
}

在主程序中，您应该编写以下内容 你需要在其他组件中使用它，比如你的应用程序

import ChangeColorComponent from "./comp"
<ChangeColorComponent/>

从“/comp”导入ChangeColorComponent

我想有很多方法可以做到这一点，也许像这里建议的那样更简单。 虽然我认为这是现在实施它的更好方法之一

---

编辑：我编辑了我的代码，因为我在编写代码时没有使用react应用程序，直到现在还无法测试它/

我创建了一个简单的应用程序，向您展示如何实现它，我希望这将给您一个大致的想法。你不能按原样使用它，因为我猜你的问答对象的形状可能与我使用的不同

工作应用程序：

import React，{useState，useffect}来自“React”；
导入“/style.css”；
从“/questions”导入{questions}；
导出默认函数App（）{
const[selectedAns，setSelectedAns]=useState（“”）；
const[index，setIndex]=useState（0）；
const[score，setScore]=useState（0）；
const[shadow，setShadow]=useState（null）；
useffect（（）=>{
console.log（选定的AN）；
}，[selectedAns]）；
返回(
{问题[索引]？.问题}
{
设置选定的问题（问题[索引]？。正确答案）；
}}
风格={{
boxShadow：
所选答案==问题[索引]？。回答正确
？所选答案==问题[索引]？。回答正确
？0 0 5×2×rgba（1、156、48、0.3）
：“0 5px2pRGBA（255,0,0,0.3）”
：null
}}
>
{问题[索引]？.正确答案}
{问题[索引]？。答案不正确？.map（答案=>(
{
被选者（答案）；
控制台日志（应答）；
}}
风格={{
boxShadow：
选择的人！==回答
无效的
：selectedAns==问题[索引]？。回答正确
？0 0 5×2×rgba（1、156、48、0.3）
：“0 5px2pRGBA（255,0,0,0.3）”
}}
>
{答案}
))}
{
setIndex（index+1）；
如果（问题[索引]？。正确答案==所选答案）{
核心得分（得分+1）；
}
被选者（“”）；
}}
>
下一个
您的分数：{SCORE}
);
}

这是否回答了您的问题？我用钩子。比这更简单，因为不会在其他地方使用。这么简单。谢谢你，太棒了。多谢各位

import ChangeColorComponent from "./comp"
<ChangeColorComponent/>