react如何渲染html

渲染HTML字符串的方法

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

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

安全注意事项

使用前必须确保HTML内容来自可信源并经过净化处理。推荐使用DOMPurify等库进行净化：

import DOMPurify from 'dompurify';

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

替代方案

对于简单文本转换，可使用正则表达式替换换行符为<br/>：

function FormatText({ text }) {
  const formatted = text.split('\n').map((line, i) => (
    <span key={i}>
      {line}
      <br />
    </span>
  ));
  return <div>{formatted}</div>;
}

组件库解决方案

部分UI库提供安全的HTML渲染组件，如React的html-react-parser：

import parse from 'html-react-parser';

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