如何在React应用中导入或渲染HTML页面？

根据你的场景，这里提供3种适配不同需求的实现方式： #

方案1：使用 dangerouslySetInnerHTML 渲染 #

适用场景 #

• 联系我们页面的HTML内容体量小
• HTML为你自行开发，无恶意注入风险
• 不需要保留原有HTML页面的独立脚本和样式隔离

实现步骤 #

1. 将你写好的contact.html文件放到React项目的public目录下
2. 对应联系我们路由的React组件中通过请求获取HTML内容后渲染，代码示例：

import { useEffect, useState } from 'react';

const ContactPage = () => {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    // 读取public目录下的HTML文件
    fetch('/contact.html')
      .then(response => response.text())
      .then(htmlText => setHtmlContent(htmlText));
  }, []);

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

export default ContactPage;

注意事项 #

如果原有HTML里有相对路径引用的静态资源（图片、css文件等），需要将资源路径改为绝对路径，或者对应放到public目录的匹配路径下 #

方案2：使用iframe嵌入 #

适用场景 #

• 联系我们页面是完整的独立HTML文档（包含完整的head、body标签、自有样式和脚本）
• 希望原有HTML的功能完全不与React应用冲突，不需要做额外适配

实现步骤 #

1. 同样将contact.html放到React项目的public目录下
2. 对应联系我们路由的组件直接嵌入iframe即可，代码示例：

const ContactPage = () => {
  return (
    <iframe
      src="/contact.html"
      style={{ width: '100%', minHeight: '100vh', border: 'none' }}
      title="联系我们"
    />
  );
};

export default ContactPage;

注意事项 #

该方案不需要修改原有HTML的任何代码，原有页面的所有功能、样式、事件都可以正常运行 #

方案3：HTML转JSX组件 #

适用场景 #

• 后续需要在React技术栈下迭代维护联系我们页面的内容

实现步骤 #

1. 本地使用HTML转JSX工具将原有纯HTML代码转换为符合React规范的JSX代码
2. 将原有样式抽离为单独的css文件，引入到转换后的JSX组件中即可直接使用

额外说明：如果原有HTML中存在内联事件（如onclick），使用dangerouslySetInnerHTML方案时React不会主动处理这些事件绑定，这种场景优先选择iframe方案。

内容的提问来源于stack exchange，提问作者devXjatin