React中使用外部脚本时如何获取对应DOM元素并解决偶发报错

你的报错确实是执行useEffect时，第三方脚本还未完成加载、也未渲染出对应DOM节点导致的，以下是几种可行的解决方案：

方案1：使用MutationObserver监听DOM插入（最推荐） #

该方案可以精准捕捉聊天按钮被插入DOM的时机，无无效轮询的性能开销，适配性最高。

useEffect(() => {
  const targetId = 'ch-plugin-launcher'
  // 先检查节点是否已经存在
  let chatBtn = document.getElementById(targetId)
  if (chatBtn) {
    chatBtn.classList.add('hide')
  }

  // 创建DOM变化监听器
  const observer = new MutationObserver((mutations) => {
    chatBtn = document.getElementById(targetId)
    if (chatBtn) {
      chatBtn.classList.add('hide')
      // 找到目标节点后停止监听，减少性能消耗
      observer.disconnect()
    }
  })

  // 配置监听范围：监听body下所有后代节点的插入动作
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })

  return () => {
    observer.disconnect()
    chatBtn?.classList.remove('hide')
  }
}, [])

方案2：监听第三方脚本的加载事件 #

如果你是手动引入的第三方聊天脚本，可以直接绑定脚本的加载完成回调，等脚本加载完成后再执行隐藏逻辑。

useEffect(() => {
  const targetId = 'ch-plugin-launcher'
  // 替换为你实际引入的聊天脚本地址
  const chatScriptSrc = "你的第三方聊天脚本地址"
  const existedScript = document.querySelector(`script[src="${chatScriptSrc}"]`)
  
  const handleHideBtn = () => {
    const chatBtn = document.getElementById(targetId)
    chatBtn?.classList.add('hide')
  }

  if (existedScript) {
    if (existedScript.dataset.loaded === 'true') {
      // 脚本已经加载完成，直接执行逻辑
      handleHideBtn()
    } else {
      // 脚本还在加载中，绑定加载完成回调
      existedScript.addEventListener('load', handleHideBtn)
    }
  }

  return () => {
    existedScript?.removeEventListener('load', handleHideBtn)
    document.getElementById(targetId)?.classList.remove('hide')
  }
}, [])

方案3：轮询兜底（简单快速，适合临时场景） #

如果不想写复杂的监听逻辑，可以用短间隔轮询检查节点是否存在，找到后自动停止轮询。

useEffect(() => {
  const targetId = 'ch-plugin-launcher'
  let checkTimer = null

  // 每100ms检查一次节点是否存在，频率可自行调整
  checkTimer = setInterval(() => {
    const chatBtn = document.getElementById(targetId)
    if (chatBtn) {
      chatBtn.classList.add('hide')
      clearInterval(checkTimer)
    }
  }, 100)

  return () => {
    clearInterval(checkTimer)
    document.getElementById(targetId)?.classList.remove('hide')
  }
}, [])

提示：如果是多路由场景下仅部分页面隐藏，需要将当前路由路径加入useEffect的依赖数组，确保路由切换时逻辑会重新执行。

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