动态更改样式，在React中重新渲染时无需重置

Question

我只有一个叫onClick函数的div列表页面。这差不多...

<div
            className="square card-container bg-primary"
            points="200"
            id="2"
            onClick={e => select(200, "cat1", e.target.id)}
          >
            <h3 className="text-light">200</h3>
          </div> 

其中只有30个。具有顺序ID。单击时将ID推送到新数组，或单击ID后将其添加到className都很容易，当我在Debugger中逐步执行代码时，我可以看到该类已添加并且样式发生了变化，但立即设置回先前的“未单击” className。我当时想让每个div成为自己的组件，而不是使用useState可能会起作用，但是由于它们几乎都是相同的，因此我仍然需要一个键或id，所以我不确定如何将其传递给进入状态并有条件地使用它？很抱歉，如果这没有意义。基本上，我只想在选择一个项目后稍稍更改样式，而不必在重新渲染它时返回初始的className。这是被称为onClick的脚本。

const selected = []
  const change = id => {

    selected.push(id);
    console.log(selected);
  };

  const select = (points, cat, id) => {
    let newArr = questions.filter(
      q => q.category === "Sample 1" && q.points === points
    );
    change(id);
    if (newArr.length > 1) {
      let randomOutput = Math.floor(Math.random() * newArr.length);
      console.log(newArr[randomOutput]);
      let out = newArr[randomOutput];
      props.setQuestion({ out });
      props.detail();
      return out;
    } else {
      let out = newArr;
      props.setQuestion({ out });
      props.detail();
      console.log(points, cat);
    }
  }

Answer 1

您需要使用状态存储所选项目的列表并使className动态化>