当前位置：首页 > React

如何让react解析HTML代码

2026-01-25 05:03:12React

使用 `dangerouslySetInnerHTML`

React 提供了 dangerouslySetInnerHTML 属性来直接插入 HTML 代码。该属性接受一个对象，其中 __html 字段包含需要渲染的 HTML 字符串。此方法适用于需要动态渲染 HTML 的场景，但需注意潜在的安全风险（如 XSS 攻击）。

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

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

使用第三方库 `react-html-parser`

react-html-parser 是一个专门用于解析 HTML 字符串并转换为 React 元素的库。安装后，可以直接调用其函数将 HTML 字符串转换为可渲染的 React 组件。

npm install react-html-parser

import ReactHtmlParser from 'react-html-parser';

const htmlContent = '<div><p>Parsed by react-html-parser</p></div>';

function MyComponent() {
  return <div>{ReactHtmlParser(htmlContent)}</div>;
}

使用 `DOMPurify` 进行安全净化

若 HTML 内容来自用户输入或不可信源，建议先用 DOMPurify 清理恶意代码，再通过 dangerouslySetInnerHTML 渲染。DOMPurify 会移除脚本、事件处理器等危险内容。

npm install dompurify

import DOMPurify from 'dompurify';

const userHtml = '<div onclick="alert(\'XSS\')">User content</div>';
const cleanHtml = DOMPurify.sanitize(userHtml);

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

自定义解析函数

对于简单 HTML 片段，可通过正则表达式或字符串操作手动解析为 React 元素。此方法灵活性高，但复杂 HTML 结构可能难以处理。

如何让react解析HTML代码

const parseHtml = (html) => {
  return html.replace(/<p>(.*?)<\/p>/g, (_, text) => `<p key=${text}>${text}</p>`);
};

const htmlContent = '<p>Custom parsed</p>';

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