当前位置：首页 > React

react如何解析html

2026-03-11 02:50:24React

解析HTML字符串为React元素

在React中解析HTML字符串需要使用dangerouslySetInnerHTML属性，但需要注意XSS攻击风险。将HTML字符串赋值给__html键，React会将其渲染为DOM元素。

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

使用第三方库解析HTML

对于更复杂的HTML解析需求，可以使用html-react-parser库。该库能将HTML字符串转换为React组件树，支持替换特定节点等高级功能。

react如何解析html

npm install html-react-parser

import parse from 'html-react-parser';

function Component() {
  const html = '<p>Example <strong>HTML</strong></p>';
  return <div>{parse(html)}</div>;
}

处理HTML字符串中的事件

当需要为解析后的HTML元素添加事件处理时，可以通过html-react-parser的替换功能实现。创建一个替换配置对象，指定如何处理特定类型的节点。

react如何解析html

const parsed = parse('<button>Click</button>', {
  replace: (domNode) => {
    if (domNode.name === 'button') {
      return <button onClick={() => alert('Clicked')}>Click</button>;
    }
  }
});

清理不安全的HTML

使用DOMPurify库可以防止XSS攻击，先对HTML字符串进行净化处理再解析。这个库会移除所有可能危险的标签和属性。

npm install dompurify

import DOMPurify from 'dompurify';
import parse from 'html-react-parser';

const dirty = '<div><script>alert("xss")</script></div>';
const clean = DOMPurify.sanitize(dirty);
return parse(clean);

服务器端渲染处理

在Next.js等支持SSR的框架中解析HTML时，需要确保DOMPurify和解析过程在客户端执行。通过动态导入或效果钩子延迟这些操作。

import { useEffect, useState } from 'react';

function SafeHTML({ html }) {
  const [content, setContent] = useState(null);

  useEffect(() => {
    import('dompurify').then((DOMPurify) => {
      setContent(DOMPurify.sanitize(html));
    });
  }, [html]);

  return <div dangerouslySetInnerHTML={{ __html: content }} />;
}