本文介绍在 react 中正确渲染富文本 html 邮件内容的两种主流方案，重点对比 `dangerouslysetinnerhtml` 与 `srcdoc` iframe 的实际效果、样式隔离性及安全性差异，并提供可直接使用的最佳实践代码。
在 React 应用中渲染第三方 HTML 邮件（如营销邮件、通知模板）时，开发者常遇到样式错乱、脚本失效或布局失真等问题。你可能已尝试使用
，但发现渲染结果与原生 HTML 页面不一致——这是因为 dangerouslySetInnerHTML 会将 HTML 片段直接注入当前 DOM 上下文，导致：- 外部 CSS 样式被全局样式覆盖或干扰；
- 内联
-
、 等文档级标签被忽略； - 相对路径资源（如 src="images/logo.png"）因缺少上下文 base URL 而 404；
- 潜在 XSS 风险（若 data 未严格净化）。
✅ 更优解：使用
该方案将 HTML 内容作为独立文档嵌入，天然具备完整的 HTML 解析环境：
⚠️ 关键说明：
- srcDoc 属性支持完整 HTML 文档结构（含 ...），能正确解析
- iframe 提供样式与脚本作用域隔离，彻底避免父应用 CSS 泄漏或冲突；
- 必须添加 sandbox 属性以限制执行权限（默认禁用脚本/表单/弹窗），提升安全性；如需交互，可显式添加 allow-scripts 等 token；
- 若 data 包含相对路径资源，请确保其为绝对 URL，或在 HTML 中显式设置
。
? 进阶建议：
- 对不可信 HTML，务必在服务端或前端使用 DOMPurify.sanitize(data) 预处理，再传入 srcDoc；
- 为适配移动端，可在 data 的 中注入响应式 meta 标签：
； - 如需动态调整 iframe 高度，可通过 postMessage 与 iframe 内容通信（需双方配合）。
总结：当目标是保真还原 HTML 邮件的原始视觉与行为时， 是比 dangerouslySetInnerHTML
更可靠、更安全、更符合语义的选择——它不是“绕过问题”，而是回归 HTML 的文档本质。
