如何在反应中有条件地添加样式？ [复制]

Posted 2023-03-16

【中文标题】如何在反应中有条件地添加样式？ [复制]

【英文标题】：How to Conditionally Add styles in react? [duplicate]

【发布时间】：2021-04-23 04:21:30

【问题描述】：

我正在用 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)'
        

【问题讨论】：

这能回答你的问题吗？ Correct way to handle conditional styling in React

【参考方案1】：

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

即

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 中实现它的更好方法之一

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

【讨论】：

我使用了钩子。比这更简单，因为不会在其他地方使用。很简单。谢谢

【参考方案2】：

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

工作应用：StackBlitz

import React,  useState, useEffect  from "react";
import "./style.css";
import  questions  from "./questions";
export default function App() 
  const [selectedAns, setSelectedAns] = useState("");
  const [index, setIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [shadow, setShadow] = useState(null);

  useEffect(() => 
    console.log(selectedAns);
  , [selectedAns]);
  return (
    <div>
      <h3>questions[index]?.question</h3>
      <div
        className="ans"
        onClick=() => 
          setSelectedAns(questions[index]?.correct_answer);
        
        style=
          boxShadow:
            selectedAns == questions[index]?.correct_answer
              ? selectedAns == questions[index]?.correct_answer
                ? "0 0 5px 2px rgba(1, 156, 48 , 0.3)"
                : "0 0 5px 2px rgba(255, 0,  0, 0.3)"
              : null
        
      >
        questions[index]?.correct_answer
      </div>
      questions[index]?.incorrect_answers?.map(answer => (
        <div
          className="ans"
          onClick=() => 
            setSelectedAns(answer);
            console.log(answer);
          
          style=
            boxShadow:
              selectedAns !== answer
                ? null
                : selectedAns == questions[index]?.correct_answer
                ? "0 0 5px 2px rgba(1, 156, 48 , 0.3)"
                : "0 0 5px 2px rgba(255, 0,  0, 0.3)"
          
        >
          answer
        </div>
      ))
      <button
        className="ans"
        onClick=() => 
          setIndex(index + 1);
          if (questions[index]?.correct_answer == selectedAns) 
            setScore(score + 1);
          
          setSelectedAns("");
        
      >
        NEXT
      </button>
      <h3>YOUR SCORE: score</h3>
    </div>
  );

【讨论】：

太棒了。非常感谢