React项目中index.html插入script标签不生效问题咨询

主要有以下几个核心原因：

• 脚本执行时机早于DOM生成时机
  你直接把包含DOM操作的script标签写在index.html中时，脚本会同步执行。如果script的位置在React根挂载节点之前，或者执行时React还没有完成组件渲染生成对应DOM，document.getElementById('div1')会返回null，后续访问style属性的操作会直接报错，自然不会生效。
• 手动修改被React重渲染覆盖
  就算你恰好拿到了已经生成的DOM节点完成了属性修改，后续只要对应组件触发React重渲染，React会根据自身维护的虚拟DOM结构重置真实DOM的属性，你手动修改的原生属性会被直接覆盖，看起来就像操作没生效。
• 节点本身未正常挂载
  要确认你需要操作的元素确实绑定了id="div1"，同时该元素所属的组件没有处于未挂载的状态（比如条件渲染判定为不渲染、路由未命中对应页面等），这种情况也会导致DOM查询返回空。

推荐的解决方式 #

• 符合React开发规范的方案是通过状态控制元素样式，不要直接操作DOM：

import { useState } from 'react'

function YourComponent() {
  // 用状态控制可见性
  const [isDiv1Visible, setIsDiv1Visible] = useState(true)
  
  const hideDiv = () => {
    setIsDiv1Visible(false)
  }

  return (
    <div 
      id="div1" 
      style={{ visibility: isDiv1Visible ? 'visible' : 'hidden' }}
    >
      你的元素内容
    </div>
  )
}

• 如果你必须使用原生DOM操作，要把操作逻辑放到组件挂载完成后的时机执行：

import { useEffect } from 'react'

function YourComponent() {
  useEffect(() => {
    // 组件挂载后才会执行这段逻辑，此时DOM已经生成
    document.getElementById('div1').style.visibility = "hidden";
  }, [])

  return <div id="div1">你的元素内容</div>
}

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