修复 Chrome 翻译在交互式 React 组件中出现的问题
作者: iftype创建于 2026年5月28日更新于 2026年5月28日
- the-two-reacts 链接: https://overreacted.io/the-two-reacts/ https://GitHub.com/user-attachments/assets/8704023f-9467-4afd-be9d-42cf41db6b20 2. impossible-components 链接: https://overreacted.io/impossible-components/ https://GitHub.com/user-attachments/assets/ea8c9354-d306-4c6d-b1e6-f2409aab27e8 3. a-social-filesystem 链接: https://overreacted.io/a-social-filesystem/ https://GitHub.com/user-attachments/assets/45d1c8b1-7b73-4de0-ab80-389877726d7e ## 问题 浏览器翻译工具（例如 Chrome Translate）可能会破坏非英语读者的博客部分。 * 内联代码顺序 在包含多个内联代码片段的句子中，翻译后的文本可能会不自然地重新排序，使示例更难以阅读。 * 交互组件破坏 部分客户端示例在翻译后可能停止响应，因为翻译者在 React 管理的组件内部修改了 DOM 文本节点。 ## 修复 将
translate="no"和notranslate应用于： * 动态交互组件，以防止干扰 React 重新调整的 DOM 修改 * 代码块，以保留翻译期间的代码内容 我也测试了用<span>替换内联<code>，这在本地改善了翻译行为，但我没有将此更改纳入，以保持语义正确性。内联代码顺序可能需要单独讨论。 ## 验证 本地测试并确认npm run build成功完成，生成了 SSG 页面。
内容来源: gaearon/overreacted.io