Chrome开启自动翻译时React表单输入触发DOMException的解决方法

这个报错是浏览器自动翻译功能和React虚拟DOM机制冲突导致的：

1. Chrome内置自动翻译触发时，会直接遍历篡改页面真实DOM：将识别到的原语言文本节点拆分、替换为包裹了翻译结果的新DOM节点，整个修改过程完全绕过React的状态更新逻辑，不会同步修改React内存中保存的虚拟DOM结构，直接造成虚拟DOM和真实DOM的节点映射关系失效。
2. 用户在输入框输入内容触发组件重渲染时，React会按照虚拟DOM记录的节点层级关系，调用原生DOM的insertBefore方法完成节点更新。此时React预期作为插入锚点的节点，已经被翻译逻辑移出当前父节点/直接替换，根本不是父节点的子元素，不符合insertBefore的API调用要求，就会抛出对应的DOMException。

该问题不是韩语翻译场景独有，只要Chrome自动翻译触发了DOM结构修改，任意目标语言下都可能出现同类报错。韩语场景下输入框的占位符、关联校验提示文本更容易被翻译模块识别篡改，因此复现概率更高。

按落地成本从低到高排序：

• 方案1：标记不需要翻译的区域，从根源避免翻译逻辑篡改DOM
  如果业务本身不需要支持Chrome自动翻译，可以直接在HTML的head标签中加入元标记，全局禁用翻译：

  <meta name="google" content="notranslate">
  

  如果只需要保障表单功能正常、不影响页面其他内容的翻译，可以单独给表单容器、输入框组件添加className="notranslate"属性，翻译模块会自动跳过带该标记的DOM节点。
• 方案2：监听DOM变动主动同步状态，保留页面翻译能力
  如果业务需要兼容用户的自动翻译需求，可以通过MutationObserver监听表单区域的DOM变动，检测到翻译逻辑修改节点后，通过更新组件key的方式强制React重渲染，重新对齐虚拟DOM和真实DOM的映射关系，核心实现代码如下：

  import { useState, useEffect, useRef } from 'react'
  
  function RegisterForm() {
    const formRef = useRef(null)
    const [domSyncKey, setDomSyncKey] = useState(0)
  
    useEffect(() => {
      if (!formRef.current) return
      const domObserver = new MutationObserver(() => {
        setDomSyncKey(prev => prev + 1)
      })
      // 监听子节点变动、文本内容变动
      domObserver.observe(formRef.current, {
        childList: true,
        subtree: true,
        characterData: true
      })
      return () => domObserver.disconnect()
    }, [])
  
    return (
      <form ref={formRef} key={domSyncKey}>
        {/* 原有表单项逻辑不变 */}
      </form>
    )
  }
  

• 方案3：升级React版本到18.x
  React 18 对外部脚本篡改DOM的场景做了专门的容错处理：执行insertBefore操作前会先校验锚点节点的归属，发现锚点不存在时不会直接抛出阻断错误，会自动降级为追加节点的逻辑完成渲染，能从框架层面规避大部分同类报错。

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