嵌入.Net应用的React DOM遭外部修改，如何避免影响React应用？

方案1：给React根节点添加翻译插件忽略标记 #

大部分主流翻译插件（比如浏览器自带翻译、第三方翻译工具）都支持通过特定类名或属性跳过指定DOM区域的翻译。你可以直接给React应用的根容器加标记：

• 在HTML层面的根容器上添加：<div id="root" class="notranslate"></div>
• 或者在React组件的根元素上设置：

  function App() {
    return (
      <div className="notranslate">
        {/* 你的应用内容 */}
      </div>
    );
  }
  

这个方案零侵入、实现简单，只要翻译插件支持notranslate类（大部分都兼容），就能直接阻止插件修改React应用内的DOM，从源头避免虚拟DOM和真实DOM的冲突。

方案2：React内部实现独立翻译逻辑 #

完全接管应用内的文本渲染，用React生态的翻译库（比如i18next、react-intl）自己做多语言支持：

• 把状态里的具体文本替换成翻译key，比如将state.text = "提交"改成state.textKey = "submit"
• 渲染时通过翻译库将key转成对应语言的文本：

  import { useTranslation } from 'react-i18next';
  
  function SubmitButton() {
    const { t } = useTranslation();
    return <button>{t('submit')}</button>;
  }
  

这种方式下，React始终牢牢控制DOM文本的渲染逻辑，就算外部翻译插件篡改了真实DOM，React下次重渲染时也会自动纠正回正确的文本，彻底避免虚拟DOM与真实DOM的不一致问题。缺点是需要额外开发多语言逻辑，但能完全摆脱对外部翻译插件的依赖。

方案3：用MutationObserver拦截非法DOM修改 #

如果无法修改翻译插件配置，也不想自己做翻译，可以用MutationObserver监听React根节点的变化，拦截翻译插件的文本修改：

const root = document.getElementById('root');
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只处理文本内容变化的情况
    if (mutation.type === 'characterData' && mutation.target.parentElement.closest('#root')) {
      // 恢复成React渲染的原始文本（需提前存储对应元素的原始内容）
      mutation.target.textContent = mutation.oldValue;
    }
  });
});

// 配置监听选项
observer.observe(root, {
  characterData: true,
  characterDataOldValue: true,
  subtree: true
});

这个方案属于被动防御，适合临时救急，但要注意区分React自身的DOM更新和翻译插件的修改，避免误拦截正常的状态更新。

方案4：协调主应用翻译插件配置排除React区域 #

如果主应用的翻译插件支持自定义排除规则，可以和主应用开发团队沟通，把React应用的根容器选择器（比如#root）添加到插件的排除列表里。这样插件会主动跳过整个React应用的内容，从源头避免DOM被篡改。这个方案最彻底，但需要主应用方的配合。

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