当前位置：首页 > React

react如何展示html

2026-01-23 19:38:52React

渲染原始 HTML

在 React 中直接渲染原始 HTML 需要使用 dangerouslySetInnerHTML 属性。该属性接收一个对象，其中 __html 键对应的值是需要渲染的 HTML 字符串。

function DisplayHTML({ htmlContent }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

清理 HTML 内容

为了防止 XSS 攻击，建议在渲染前使用 DOMPurify 等库清理 HTML 内容：

import DOMPurify from 'dompurify';

function SafeHTML({ htmlContent }) {
  const cleanHTML = DOMPurify.sanitize(htmlContent);
  return <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />;
}

替代方案

对于简单的 HTML 片段，可以考虑手动解析并转换为 React 元素：

function parseSimpleHTML(html) {
  return html.replace(/<b>(.*?)<\/b>/g, '<strong>$1</strong>');
}

function SimpleHTMLRenderer({ html }) {
  return <div>{parseSimpleHTML(html)}</div>;
}

注意事项

使用 dangerouslySetInnerHTML 时需要注意：

仅渲染可信来源的内容
避免直接渲染用户输入的内容
考虑使用 CSP 等安全措施
对于复杂 HTML 可能需要配合其他库处理

服务端渲染场景

在 Next.js 等框架中，可以结合 dangerouslySetInnerHTML 与 SSR：

react如何展示html

export default function Page({ serverData }) {
  return (
    <main>
      <article dangerouslySetInnerHTML={{ __html: serverData.content }} />
    </main>
  );
}