React组件中fetch加载HTML文件不显示问题求助

我尝试在React组件中显示HTML文件，经VS Code调试确认setHtmlContent已调用，且htmlContent已被设置为HTML字符串，但页面并未显示该HTML文件中的‘hello’内容；若移除fetch逻辑，直接将HTML内容赋值给变量则可正常显示‘hello’，请问是否是我导入HTML文件的方式存在错误？

使用fetch加载HTML的示例 #

src/assets/html/en.html #

<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>Hello</p>
    </div>
  </body>
</html>

src/App.js #

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [htmlContent, setHtmlContent] = useState("");

  useEffect(() => {
    // Fetch the HTML content from a file or URL
    fetch("../assets/html/en.html")
      .then((response) => response.text())
      .then((data) => {
        setHtmlContent(data);
      })
      .catch((error) => {
        console.error("Error fetching HTML content:", error);
      });
  }, []);

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

直接将HTML作为变量的示例 #

src/App.js #

import "./styles.css";
import React from "react";

export default function App() {
  const htmlContent = `
  <!DOCTYPE html>
  <html>
    <style>
      body {
        font-family: 'Roboto', sans-serif;
        padding: 0px;
      }
    </style>

    <body>
      <div class="et_pb_tab_content">
        <div class="page" title="Page 1">
          <div class="layoutArea">
            <div class="column">
              <p>Hello</p>
            </div>
          </div>
        </div>
    </body>
  </html>
  `;

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

问题出在fetch的路径错误，React项目（如Create React App）中src目录下的文件会被webpack处理，无法直接通过相对路径用fetch访问。以下是两种可行的解决方法：

1. 迁移HTML文件到public目录

   • 在项目根目录的public文件夹下创建assets/html目录，将en.html移入其中
   • 修改fetch路径为根相对路径：

     fetch("/assets/html/en.html")
     

   public目录是项目的静态资源根目录，直接从根路径访问即可正确获取文件。

2. 通过import导入HTML文件（需配置loader）

   • 安装依赖：npm install html-loader --save-dev
   • 配置webpack规则（若使用Create React App，需借助react-app-rewired修改配置）：

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

   • 在App.js中直接导入使用：

     import htmlContent from "./assets/html/en.html";
     

注：即使fetch到完整的HTML文档（包含<html>、<body>标签），dangerouslySetInnerHTML插入时浏览器会自动过滤外层标签，只保留内部内容，不影响最终显示效果。

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