react 如何显示html

渲染 HTML 字符串

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

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

安全注意事项

使用 dangerouslySetInnerHTML 会绕过 React 的默认转义机制，可能导致 XSS 攻击。务必确保 HTML 字符串来源可信。

// 安全示例：仅渲染可信来源或经过清理的内容
import DOMPurify from 'dompurify';

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

替代方案

对于简单需求，可通过解析库将 HTML 字符串转换为 React 组件：

import parse from 'html-react-parser';

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

动态组件生成

若需根据 HTML 动态生成交互式组件，可结合状态管理实现：

function DynamicRenderer({ template }) {
  const [components, setComponents] = useState([]);

  useEffect(() => {
    const parsed = parseTemplate(template); // 自定义解析逻辑
    setComponents(parsed);
  }, [template]);

  return <div>{components}</div>;
}