react如何渲染html

React 渲染 HTML 的方法

在 React 中渲染 HTML 字符串时，需要注意安全性和渲染方式。以下是几种常见的方法：

使用 dangerouslySetInnerHTML

React 提供了 dangerouslySetInnerHTML 属性来直接渲染 HTML 字符串。这种方法需要谨慎使用，因为它可能带来 XSS 攻击风险。

const htmlString = '<div>This is HTML content</div>';

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

使用第三方库（如 html-react-parser）

如果需要更复杂的 HTML 解析和渲染，可以使用第三方库如 html-react-parser。

import parse from 'html-react-parser';

const htmlString = '<div>This is HTML content</div>';

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

使用 DOMPurify 进行安全过滤

为了确保 HTML 字符串的安全性，可以使用 DOMPurify 对内容进行过滤。

import DOMPurify from 'dompurify';

const htmlString = '<div>This is HTML content</div>';

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

注意事项

• 尽量避免直接渲染用户输入的 HTML 字符串，以防止 XSS 攻击。
• 如果需要动态渲染 HTML，确保内容经过安全过滤。
• 对于简单的文本内容，优先使用 React 的文本渲染而非 HTML 字符串。