如何将html文件导入为字符串反应？答案

【问题标题】：How to import html file into react as string?如何将html文件导入为字符串反应？
【发布时间】：2021-06-07 13:58:49
【问题描述】：

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

如何将此 html 文件导入我的 react 应用程序？

我已经尝试过import htmlString from '../../../constants/EmailHTML.html'; 和var html = require('../../../constants/EmailHTML.html');（这是在这个similar question 中建议的）

两次尝试都出现以下错误：

模块解析失败：意外令牌 (1:0) 您可能需要一个适当的加载器来处理这种文件类型，目前没有加载器配置为处理此文件。

这个问题实际上归结为：如何在 React 中将文本文件作为字符串导入？这是一个经常回答的问题，所有结果似乎都是使用异步加载器——考虑到文件在我的 src 目录中准备好在构建之前运行，因此实际上不需要发生这种情况。

【问题讨论】：

这能回答你的问题吗？ require file as string
并非如此，因为它们依赖于使用 node.js 中的文件系统模块和使用 readFileSync。不过，也许导入只是一个复杂的过程，我需要处理它。

标签： javascript reactjs create-react-app

【解决方案1】：

create-react-app 的答案：

Install 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;

【讨论】：

Create-React-App 对你隐藏 webpack 的东西，除非你“弹出”你的项目。
我已经发布了 create-react-app 的答案。在原始问题中提及它会很好:-)