HTML 渲染 RenderDom

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

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

Hello World!

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

Prop 名称	类型	默认值	描述
`dom`	`string`	`''`	需要被渲染的 HTML 字符串内容
`className`	`string`	`''`	自定义的样式类名，追加到组件容器上
`style`	`React.CSSProperties`	`{}`	内联样式对象，传递给最外层容器元素

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

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

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