react如何渲染html

渲染HTML字符串的方法

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

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

使用第三方库

对于更复杂的HTML渲染需求，可考虑使用以下库：

• dompurify: 先对HTML进行净化再渲染
• react-html-parser: 将HTML字符串转换为React元素

import ReactHtmlParser from 'react-html-parser';

function SafeRenderHTML({ htmlString }) {
  return <div>{ReactHtmlParser(htmlString)}</div>;
}

安全注意事项

确保所有动态HTML内容经过净化处理，避免直接渲染用户输入的内容。使用DOMPurify等工具过滤恶意代码：

import DOMPurify from 'dompurify';

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

性能优化方案

对于大量静态HTML内容，可考虑服务端渲染或静态生成方案。使用Next.js等框架时，通过getStaticProps获取预渲染内容：

export async function getStaticProps() {
  const htmlContent = await fetchHTMLFromCMS();
  return { props: { htmlContent } };
}

替代方案比较

当不需要完整HTML功能时，优先使用React组件而非HTML字符串。对于富文本内容，考虑专用编辑器库如：

• Draft.js
• Slate.js
• Quill.js

这些库提供更安全的富文本处理能力，同时与React深度集成。