React集成Google翻译API访问特定页面出现报错与渲染异常问题咨询

两类报错的核心来源是谷歌翻译原生DOM操作和React虚拟DOM管控逻辑的冲突，叠加组件卸载时的清理缺失：

• 谷歌翻译的TranslateElement实例初始化后，会绕过React虚拟DOM直接操作原生DOM，在指定挂载点周边插入自身生成的节点。当路由切换、组件重渲染时，React会按照虚拟DOM的计算结果移除、重排自有管控的节点，此时谷歌翻译仍持有之前保存的旧DOM节点引用执行插入操作，就会抛出insertBefore的DOM异常。
• 原代码的useEffect没有任何卸载清理逻辑：组件路由切换卸载后，动态插入的翻译脚本未被移除、全局回调引用未被清空，脚本绑定的翻译逻辑仍在尝试操作已被销毁的DOM，就会触发“在未挂载组件上执行状态更新”的内存泄漏提示。
  此外React 18开发环境的严格模式会重复执行一次useEffect，原代码没有做脚本重复加载判断，会向页面插入两次谷歌翻译脚本，进一步放大DOM冲突的概率。

按照以下逻辑调整代码，从根源规避冲突：

• 增加脚本加载的存在性判断，避免严格模式下重复插入相同脚本
• 补全组件卸载的全量清理逻辑：移除动态插入的脚本、清空全局回调引用、清理挂载点的残留DOM
• 初始化前校验DOM挂载点、全局翻译对象的存在性，避免节点未渲染就执行初始化
  调整后的参考代码：

const googleTranslateElementInit = () => {
  // 校验挂载点、全局翻译对象是否存在，不存在直接终止初始化
  const translateContainer = document.getElementById('google_translate_element');
  if (!translateContainer || !window.google?.translate?.TranslateElement) return;

  new window.google.translate.TranslateElement({
    pageLanguage: 'ko',
    layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}

useEffect(() => {
  // 页面已存在翻译脚本时，不重复插入
  const existingScript = document.querySelector('script[src*="translate_a/element.js"]');
  if (!existingScript) {
    const addScript = document.createElement('script');
    addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
    document.body.appendChild(addScript);
  }
  // 绑定全局初始化回调
  window.googleTranslateElementInit = googleTranslateElementInit;

  // 组件卸载时执行清理
  return () => {
    // 移除全局回调引用，避免组件卸载后触发残留逻辑
    delete window.googleTranslateElementInit;
    // 移除动态插入的翻译脚本
    const scriptToRemove = document.querySelector('script[src*="translate_a/element.js"]');
    if (scriptToRemove) {
      document.body.removeChild(scriptToRemove);
    }
    // 清空翻译挂载点的残留DOM，避免下次渲染出现节点不匹配
    const translateContainer = document.getElementById('google_translate_element');
    if (translateContainer) {
      translateContainer.innerHTML = '';
    }
  }
}, []);

注意：#google_translate_element的挂载节点需要放在最外层、不会随路由动态重渲染的静态容器中，不要将其放在路由对应的页面组件内部，否则路由切换时节点会被React销毁，仍会触发DOM冲突。

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