react如何展示html

渲染原始 HTML 的方法

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

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

安全注意事项

使用 dangerouslySetInnerHTML 会绕过 React 的 XSS 防护机制。必须确保 HTML 内容来自可信来源，并在渲染前进行净化处理。推荐使用 DOMPurify 等库过滤恶意代码：

import DOMPurify from 'dompurify';

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

替代方案

对于简单需求，可通过组件拆分实现类似效果。例如将 HTML 字符串转换为 React 元素数组：

function parseSimpleHTML(html) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  return Array.from(tempDiv.childNodes).map((node, index) => {
    if (node.nodeType === Node.TEXT_NODE) {
      return node.textContent;
    }
    return React.createElement(node.tagName.toLowerCase(), { key: index });
  });
}

服务端渲染场景

在 Next.js 等框架中，需特别注意 dangerouslySetInnerHTML 的 hydration 匹配问题。建议将动态 HTML 处理放在 useEffect 中，或通过服务端直接输出净化后的内容。