时间戳

首页 > 解决方案 > 如何在反应中有条件地添加样式？

css - 如何在反应中有条件地添加样式？

问题描述

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

在 Regular 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)'
        }

标签： cssreactjs

解决方案

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

IE

import {useState} from "react";


export default function ChangeColorComponent() {
    const [colorState, changeColor] = useState("gray");

    function changeColorByEvent(event) {
       // TODO: Enter your logic
       changeColor(/*your state*/)
   }

   return <div style={{color: colorState}} onClick={changeColorByEvent}>SomeText</div>
}

在你的主程序中你应该写这个你需要在其他一些组件中使用它，比如你的应用程序

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

我想有很多方法可以做到这一点，甚至可能像这里建议的那样更简单。尽管我认为这是当今在 React 中实现它的更好方法之一

编辑：我编辑了我的代码，因为我在没有反应应用程序的情况下编写了它并且直到现在都无法测试它/

推荐阅读