如何在React项目中加载并渲染HTML文件？

你的代码现在跑不起来很正常——直接import HTML文件后把它当函数调用是行不通的，因为打包工具默认不会把HTML文件处理成可执行的函数。下面给你几种靠谱的解决方案，按需选就行：

方法一：用html-loader配合dangerouslySetInnerHTML（推荐，适合webpack环境） #

这是最常用的方式，需要先让打包工具能解析HTML文件：

1. 先安装依赖的loader：

npm install html-loader --save-dev
# 或者用yarn
yarn add html-loader --dev

2. 配置webpack（如果用Create React App且没eject，推荐用craco修改配置，或者eject后修改webpack.config.js），添加上HTML文件的解析规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
};

3. 修改你的Home组件代码：

import React from 'react';
// 现在import进来的template就是HTML字符串了
import template from '../home/home.html';

const Home = () => {
  // 用dangerouslySetInnerHTML把HTML字符串渲染到页面上
  return <div dangerouslySetInnerHTML={{ __html: template }} />;
};

export default Home;

注意：dangerouslySetInnerHTML名字听起来吓人，但如果这个HTML文件是你自己维护、没有恶意内容的，完全可以放心用——它只是React在提醒你：这里的内容不会被React转义，要自己确保安全。

方法二：直接把HTML转成JSX写（最符合React原生写法） #

如果你的home.html内容不多，不如直接把里面的HTML转换成JSX写在组件里，这样不用额外配置loader，也能享受React的语法优势：

import React from 'react';

const Home = () => {
  return (
    <div>
      {/* 把home.html里的内容转成JSX，注意几个小细节：
          - class要改成className
          - 单标签要闭合（比如<img>改成<img />）
          - 内联样式要用对象语法 */}
      <h1 className="title">Home Page</h1>
      <p>Welcome to my awesome home page!</p>
    </div>
  );
};

export default Home;

方法三：用Fetch动态加载HTML（无需配置loader） #

如果不想折腾打包配置，可以直接用浏览器的Fetch API动态加载HTML文件：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 注意路径要正确，确保home.html能被静态资源服务器访问到
    fetch('../home/home.html')
      .then(res => res.text())
      .then(html => setHtmlContent(html))
      .catch(err => console.error('加载HTML失败:', err));
  }, []);

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

export default Home;

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