react如何展示html

渲染 HTML 字符串的方法

在 React 中直接渲染 HTML 字符串需要使用 dangerouslySetInnerHTML 属性。该属性允许插入原始 HTML，但需谨慎使用以避免 XSS 攻击。

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

使用场景示例

假设需要从后端接口获取一段 HTML 并展示：

const htmlFromBackend = '<p>This is <strong>HTML</strong> content</p>';

function App() {
  return <DisplayHTML htmlString={htmlFromBackend} />;
}

安全注意事项

使用 dangerouslySetInnerHTML 前必须确保 HTML 内容经过净化处理。推荐使用 DOMPurify 库过滤恶意代码：

import DOMPurify from 'dompurify';

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

替代方案

对于简单内容，可以考虑手动解析 HTML 字符串为 React 元素。使用正则表达式或第三方库如 html-react-parser：

import parse from 'html-react-parser';

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

性能优化

当需要频繁更新大量 HTML 内容时，建议使用 React.memo 避免不必要的重新渲染：

const MemoizedHTML = React.memo(function({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
});