在 react-typescript 中导入 html 文件

Posted

技术标签:

【中文标题】在 react-typescript 中导入 html 文件【英文标题】：import html file in react-typescript 【发布时间】：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 文件太大了 【参考方案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'或其相应的类型声明

以上是关于在 react-typescript 中导入 html 文件的主要内容，如果未能解决你的问题，请参考以下文章

在 NextJS 中导入 SVG

在 python 类中导入模块

如何在vue.js项目的main.js文件中导入js类并在所有组件中使用它而不是在每个组件中导入？

为啥要在 PySpark 中导入熊猫？

在javascript中导入webassembly模块的正确方法是啥

如何在 Golang 中导入本地包