在 react-typescript 中导入 html 文件

【问题标题】：import html file in react-typescript在 react-typescript 中导入 html 文件
【发布时间】：2022-01-16 09:42:26
【问题描述】：

我正在尝试将 HTML 文件 (.html) 作为组件导入到 react js - typescript (.tsx) 中

但它给了我这个错误：

错误 - ./pages/SM_login/Facebook.html 模块解析失败：意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders

| |

这是我的代码：

const facebook = require('./SM_login/facebook.html'); 

   export default class CustomDocument extends Document {
      render() {
        return (
            <div>
                 <li>                          
                    <iframe src={facebook }></iframe>
                 </li>
           </div>            
    );
}

}

【问题讨论】：

正确的做法是将你的html文件转换成jsx语法并直接插入到
标签内

@movila 太难了，因为 HTML 文件太大了

标签： javascript html reactjs typescript react-typescript

【解决方案1】：

1。将代码添加到字符串变量

在您的./SM_login/facebook.html 文件中，将所有代码包含在一个反引号 (``) 中，并使用诸如 iframeCode 之类的变量名来命名此字符串

export default iframeCode = `<html>...</html>`

2。将文件重命名为打字稿

将您的 facebook.html 重命名为 facebook.ts

3。将html代码导入为字符串化代码

在您的代码中使用 dangerouslySetInnerHTML 执行以下操作

import facebook from './SM_login/facebook.ts'

export default class CustomDocument extends Document {
      render() {
        return (
            <div>
                 <li>                          
                    <div dangerouslySetInnerHTML={{__html: facebook}} />
                 </li>
           </div>            
    );
}

【讨论】：

你救了我的命 :)

【解决方案2】：

根据反应文档，您不能使用 require 关键字导入模块，您必须使用 es6 关键字 import 您的代码应该是这样的

import facebook from "./facebook.html";

const CustomDocument = () => {
    return (
      <div>
        <li>
          <iframe src={facebook}></iframe>
        </li>
      </div>
    );
}

export default CustomDocument;

【讨论】：

不起作用！，它给了我这个错误：找不到模块'./SM_login/facebook.html'或其相应的类型声明