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

Question

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

Answer 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 应用的情况下编写了它，并且直到现在都无法对其进行测试/

Answer 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>
  );
}