当前位置：首页 > React

react如何渲染html

2026-02-11 23:48:04React

渲染 HTML 字符串的方法

在 React 中直接渲染 HTML 字符串需要使用 dangerouslySetInnerHTML 属性。该属性允许插入未经转义的 HTML 内容，但需谨慎使用以避免 XSS 攻击。

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

安全注意事项

使用 dangerouslySetInnerHTML 前必须确保 HTML 字符串来源可信。建议对用户输入内容进行消毒处理，可使用库如 DOMPurify 清除潜在恶意代码。

import DOMPurify from 'dompurify';

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

替代方案

对于需要动态生成复杂 HTML 的场景，可考虑使用 React 组件直接构建 DOM 结构。这种方式更安全且易于维护。

function DynamicContent({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

性能优化

频繁更新大量 HTML 内容时，应考虑使用 useMemo 缓存处理结果，避免不必要的重新渲染。

react如何渲染html

function OptimizedRenderer({ htmlString }) {
  const memoizedHTML = useMemo(() => {
    return DOMPurify.sanitize(htmlString);
  }, [htmlString]);

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