调用setScore修改状态后DOM元素类名未添加问题求助

我编写了一个用于修改状态并为DOM元素添加类名的nextQuestion函数，代码如下：

const nextQuestion = (e, state) => {
    if (state === true) {
      setScore((currentState) => currentState + 1);
      e.target.classList.add("quiz__question--true");
    } else {
      e.target.classList.add("quiz__question--false");
    }

    setTimeout(() => {
      setQuestion((currentQuestion) => currentQuestion + 1);
    }, "300");
  };

目前遇到的问题：当保留setScore状态修改语句时，目标元素的类名无法添加；移除该语句后，类名可正常添加。请问这是什么原因？

原因分析 #

这是因为React中调用setScore会触发组件重新渲染。重渲染后，原来的DOM元素会被新生成的节点替换——你通过e.target拿到的是旧DOM元素，给它加类名的操作会被重渲染覆盖，最终看不到效果。

如果删掉setScore，组件不会触发重渲染，旧DOM元素保留，加类名的操作自然能生效。

解决办法 #

推荐两种实用的处理方式：

1. 用状态控制类名（符合React数据流理念）

不要直接操作DOM，而是通过状态管理类名：

// 新增状态存储当前问题的类名
const [currentQuestionClass, setCurrentQuestionClass] = useState('');

const nextQuestion = (state) => {
    if (state === true) {
      setScore(current => current + 1);
      setCurrentQuestionClass("quiz__question--true");
    } else {
      setCurrentQuestionClass("quiz__question--false");
    }

    setTimeout(() => {
      setQuestion(current => current + 1);
      // 切换问题后重置类名
      setCurrentQuestionClass('');
    }, 300);
};

在JSX中绑定类名：

<div className={`quiz__question ${currentQuestionClass}`}>
  {/* 问题内容 */}
</div>

2. 使用ref获取DOM元素

给目标元素绑定ref，直接操作最新的DOM节点：

// 定义ref
const questionRef = useRef(null);

const nextQuestion = (state) => {
    if (state === true) {
      setScore(current => current + 1);
      questionRef.current?.classList.add("quiz__question--true");
    } else {
      questionRef.current?.classList.add("quiz__question--false");
    }

    setTimeout(() => {
      setQuestion(current => current + 1);
    }, 300);
};

在JSX中绑定ref：

<div ref={questionRef} className="quiz__question">
  {/* 问题内容 */}
</div>

内容的提问来源于stack exchange，提问作者Sjoerd Vermeijden