HTML 渲染 RenderDom

RenderDom 是一个用于安全渲染 HTML 字符串的 React 组件。通过 dangerouslySetInnerHTML 渲染外部或动态生成的 HTML，同时自动去除 <script> 标签，避免潜在的 XSS 攻击。

---

📦 引入方式

import { RenderDom } from '@itera-web/react-ui-renderdom';

---

🧩 使用示例

📚 基础用法

示例

Hello World!

源码

<RenderDom dom="<p>Hello <strong>World</strong>!</p>" />

📚 嵌入到 Iframe 中，常与富文本编辑器配合使用

示例

源码

<RenderDom
  useIframe
  className="p-1 box-border"
  innerCSS={`
    <style>
      html,body { overflow: hidden }
      body { margin: 0;padding: .5rem 1rem; }
      img { max-width: 100%;display: block;margin: 0 auto; }
      p { margin: .5rem 0; }
    </style>
  `}
  dom="<p>Hello <strong>World</strong>!</p>"
/>

---

🧩 Props

Prop 名称	类型	默认值	描述
dom	string	''	需要被渲染的 HTML 字符串内容
className	string	''	自定义的样式类名，追加到组件容器上
style	React.CSSProperties	{}	内联样式对象，传递给最外层容器元素
innerCSS	string	``	向 Iframe 内写入内嵌样式
useIframe	boolean	``	是否嵌入到 Iframe 内 以隔绝外部 css

---

🔐 安全注意事项

⚠️ 该组件默认会将所有 <script> 标签从 dom 字符串中移除，避免常见的 XSS 注入攻击。但 这不是 100% 安全的 HTML 清洗方式，如有严格的安全要求，建议引入专门的 HTML Sanitizer（如 DOMPurify）。

// 默认行为，移除所有 <script> 标签
dom?.replace(/<script>/g, '');

你可以根据项目需要自行扩展更安全的过滤规则或使用更强健的库。

---

🧠 设计思路

• 使用 React.memo 包裹组件，减少重复渲染，提高性能。
• 使用 clsx 动态拼接类名，支持传入外部样式类。

---

🎯 示例场景

• 富文本编辑器展示 HTML 预览结果
• Markdown 转 HTML 后的渲染
• CMS 系统中从服务端返回的 HTML 内容渲染
• 第三方插件或服务返回的嵌入 HTML 渲染