react 如何显示html

渲染原始 HTML

在 React 中直接插入原始 HTML 需要使用 dangerouslySetInnerHTML 属性。这个属性允许将 HTML 字符串直接渲染到 DOM 中，但需要注意潜在的安全风险（如 XSS 攻击）。

const rawHTML = '<p>This is <strong>raw</strong> HTML content.</p>';

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: rawHTML }} />;
}

使用第三方库

对于更复杂的 HTML 渲染需求，可以使用专门处理 HTML 的库如 html-react-parser：

npm install html-react-parser

import parse from 'html-react-parser';

const htmlString = '<div><h1>Title</h1><p>Paragraph</p></div>';

function App() {
  return <div>{parse(htmlString)}</div>;
}

处理动态内容

当需要动态加载 HTML 内容时（如从 API 获取），应确保内容经过净化处理。可以使用 DOMPurify 库来过滤恶意代码：

npm install dompurify

import DOMPurify from 'dompurify';

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

组件化方案

对于需要重复使用的 HTML 片段，可以将其封装为可复用组件：

function HTMLRenderer({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

// 使用示例
<HTMLRenderer html="<span style='color:red'>Red Text</span>" />

样式处理注意事项

当渲染的 HTML 包含内联样式时，React 可能会添加自动生成的样式前缀。如需保留原始样式，可能需要额外的 CSS 处理：

// 禁用 React 的样式自动补全
<div dangerouslySetInnerHTML={{ __html: html }} suppressHydrationWarning />