React列表元素类名切换问题：原生DOM操作为何失效？

我想实现点击列表元素时切换其active类，允许多个元素处于选中状态，但目前的代码要么完全无法切换，要么只能添加类不能移除。

尝试1：使用classList.toggle()方法 #

代码如下：

const ChoiceList = (props) => {

  const { choices } = props

  // ----------First method with toggle-----------------

  const answers = document.querySelectorAll(".answer")
  console.log("Answers array :", answers)

  answers.forEach(answer => {

    answer.addEventListener("click", () => {

      answer.classList.toggle("active")
      
    })

  })

  const choicesItemsJsx = choices.map(({id, value, weight}, index) => {
    return <li
      className="answer"
      id={id}
      key={index}
      onClick={() => {}}
    >{value}</li>
  })

  return <ul>{choicesItemsJsx}</ul>
}

ChoiceList.defaultProps = {
  choises: []
}

结果：既无法添加也无法移除active类。

尝试2：使用classList.add()和classList.remove()判断切换 #

代码如下：

// ----------Second method with add & remove----------------
  
const answers = document.querySelectorAll(".answer")
console.log("Answers array :", answers)

answers.forEach(answer => {

  answer.addEventListener("click", () => {
    
    if (answer.classList.contains("active")) {
      answer.classList.remove("active")
    } else {
      answer.classList.add("active")
    }

  })

})

结果：同样无法正常添加或移除类。

尝试3：仅添加类的代码（可正常工作） #

代码如下：

const answers = document.querySelectorAll(".answer")
console.log("Answers array :", answers)

answers.forEach(answer => {

  answer.addEventListener("click", () => {
    
    if (answer.classList.contains("active")) {
      return
    } else {
      answer.classList.add("active")
    }
       
  })

})

结果：至少能为每个列表元素添加active类。

失效原因 #

核心问题出在React组件的渲染逻辑和事件绑定时机上：

1. DOM元素未生成就执行查询：组件函数体执行时，JSX还没被渲染成真实DOM，document.querySelectorAll(".answer")拿到的是空数组，事件监听根本没绑定到任何元素上。
2. 重复绑定事件的干扰：组件每次重新渲染都会再次执行这段查询和绑定代码。对于第三种仅添加类的逻辑，多次绑定的事件触发时，第一次添加类后，后续事件检测到类已存在就直接返回，最终表现为能正常添加；但toggle或add/remove的逻辑中，多次绑定的事件会互相抵消——比如第一次toggle加类，第二次toggle又移除，所以看起来完全没效果。
3. 合成事件与原生事件冲突：你给<li>设置了空的onClick={() => {}}，React的合成事件处理会和你手动绑定的原生事件产生冲突，进一步打乱了预期的执行逻辑。

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