react 如何显示html

渲染原始HTML的方法

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

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

清理HTML内容

为确保安全性，建议使用DOMPurify等库清理HTML内容：

import DOMPurify from 'dompurify';

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

替代方案

对于需要动态生成的内容，可考虑使用React组件替代原始HTML：

function DynamicContent() {
  return (
    <div>
      <h1>安全标题</h1>
      <p>通过组件结构而非HTML字符串生成内容</p>
    </div>
  );
}

注意事项

使用dangerouslySetInnerHTML时需确保HTML来源完全可信。用户输入或第三方数据必须经过严格过滤。React会忽略通过该属性设置的HTML中的事件处理程序等脚本内容。