如何将HTML文件作为字符串导入React？

Question

我有一个HTML模板作为单独的文件，我想将其导入到我的React应用程序中。目的是替换特定关键字，然后将其作为邮件正文发送。

我该如何在我的React应用程序中导入此html文件？

我尝试过import htmlString from'../../../constants/EmailHTML.html';，以及var html = require('../../../constants/EmailHTML.html');(这在类似的问题中被建议)。

我对两个尝试都收到了以下错误：

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

实际上，这个问题归结为：如何在React中将文本文件作为字符串导入？这是一个经常回答的问题，所有结果似乎都要使用异步加载程序--这不应该发生，因为该文件在构建之前已经准备好了，位于我的src目录中。

- lowcrawler

---

这个回答解决了你的问题吗？将文件作为字符串导入(require file as string) - iBug

并不是，因为这些依赖于使用node.js的文件系统模块和readFileSync的使用。也许导入只是一个复杂的过程，我需要处理它。 - lowcrawler

Answer 1

create-react-app的解决方案：

• 安装 raw-loader 包 npm i --save raw-loader
• 将要读取的测试HTML文件添加到src中。我添加了test.html。
• 在想要将HTML文件内容转换为JavaScript字符串的位置添加以下代码行。 html 将包含文件的字符串内容。

代码：

// eslint-disable-next-line import/no-webpack-loader-syntax
var htmlModule = require('raw-loader!./test.html');
var html = htmlModule.default;

- Rich N

---

Create-React-App 会在你不执行 "eject" 命令的情况下，将 webpack 相关的内容隐藏起来。 - lowcrawler

我已经发布了一个有关create-react-app的答案。如果在原始问题中提到它会更好 :-) - Rich N