React组件中使用document.getElementById无法动态修改样式如何解决？

问题根因 #

你当前使用的是React框架，页面DOM由React的虚拟DOM机制统一管控，直接通过document.getElementById修改真实DOM的内容和样式后，只要组件触发重新渲染，React会根据虚拟DOM的比对结果把你手动修改的真实DOM内容覆盖，因此你的改动无法持久生效。

正确解决方案 #

采用React状态驱动渲染的逻辑实现需求，不需要操作原生DOM，步骤如下：

• 1、新增状态记录已点击的按钮标识
  可以单独维护一个存储已添加项索引的状态，避免修改原始records数据：

  import { useState } from 'react'
  
  // 组件内部定义状态
  const [addedIndexList, setAddedIndexList] = useState([])
  

  如果你的records会动态排序、增删，建议用item的唯一业务id代替index作为标识，避免索引错位导致的样式显示错误

• 2、修改点击事件逻辑，只更新状态不操作DOM

  function handleAddSwitch(item, index) {
    // 重复点击判断可按需保留或删除
    if (addedIndexList.includes(index)) return
    setAddedIndexList(prev => [...prev, index])
  }
  

• 3、渲染按钮时动态绑定样式和内容

  <TableBody>
    {
      records === null ?
      []
      :
      records.map((item, index) => {
        const isAdded = addedIndexList.includes(index)
        return (
          <button 
            className="addToggle" 
            style={{ backgroundColor: isAdded ? "red" : "" }}
            onClick={() => handleAddSwitch(item, index)}
          >
            <CircleCheckIcon />
            {isAdded ? "Added" : "Add"}
          </button>
        )
      })
    }
  </TableBody>
  

注意事项 #

React项目中除非有不可替代的特殊场景，否则不建议直接操作原生DOM，所有视图变化都优先通过状态驱动实现，符合React的设计逻辑也能避免这类异常问题。

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