react 如何显示html

在 React 中显示 HTML

React 默认会将所有内容作为字符串处理，直接渲染 HTML 字符串可能会导致安全问题（如 XSS 攻击）。以下是几种安全显示 HTML 的方法：

使用 dangerouslySetInnerHTML

React 提供了 dangerouslySetInnerHTML 属性来直接插入 HTML，但需谨慎使用以避免安全风险。

function DisplayHTML() {
  const htmlString = '<p>This is <strong>HTML</strong> content</p>';

  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

使用第三方库

一些库如 html-react-parser 可以安全地解析和渲染 HTML 字符串：

npm install html-react-parser

import parse from 'html-react-parser';

function DisplayHTML() {
  const htmlString = '<p>Parsed HTML content</p>';
  return <div>{parse(htmlString)}</div>;
}

手动清理 HTML

使用 DOMPurify 等库清理 HTML 后再渲染：

npm install dompurify

import DOMPurify from 'dompurify';

function DisplayHTML() {
  const dirtyHtml = '<p>Unsafe <script>alert("xss")</script> HTML</p>';
  const cleanHtml = DOMPurify.sanitize(dirtyHtml);

  return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
}

注意事项

• 直接渲染用户提供的 HTML 存在安全风险，务必使用清理工具。
• 对于静态可信内容，dangerouslySetInnerHTML 是简单直接的解决方案。
• 动态内容推荐结合 DOMPurify 或专用解析库处理。