react如何引用html页面

在React中引用HTML页面

React通常以组件化的方式构建UI，但有时需要直接嵌入现有的HTML页面。以下是几种常见方法：

使用dangerouslySetInnerHTML

适用于需要直接插入HTML字符串的场景，需注意XSS安全风险：

function EmbedHTML() {
  const htmlString = '<div><h1>Embedded HTML</h1><p>Content goes here</p></div>';

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

通过iframe嵌入

适合嵌入完整的独立HTML页面：

function IframeEmbed() {
  return (
    <iframe 
      src="/path/to/your/page.html" 
      title="Embedded Page"
      width="100%"
      height="500px"
    />
  );
}

动态加载HTML内容

使用fetch或axios获取HTML内容后渲染：

import { useState, useEffect } from 'react';

function DynamicHTML() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    fetch('/path/to/page.html')
      .then(res => res.text())
      .then(html => setHtmlContent(html));
  }, []);

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

使用react-html-parser库

第三方库提供更安全的HTML解析：

npm install react-html-parser

import ReactHtmlParser from 'react-html-parser';

function ParserExample() {
  return <div>{ReactHtmlParser('<span>Parsed HTML</span>')}</div>;
}

注意事项

• 直接插入HTML需特别注意跨站脚本(XSS)安全问题
• 样式冲突可能发生在嵌入内容与React组件之间
• 考虑使用CSS隔离技术如Shadow DOM
• 对于复杂交互，建议将HTML重构为React组件