在 react-typescript 中导入 html 文件

Question

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

但它给了我这个错误：

error - ./pages/SM_login/Facebook.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. See 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>            
    );
}

}

Answer 1

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

import facebook from "./facebook.html";

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

export default CustomDocument;

Answer 2

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

在您的 ./SM_login/facebook.html 文件中，将所有代码包裹在反引号 (``) 中，并使用变量名称命名此字符串，例如 iframeCode

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

2。将文件重命名为 typescript

将您的 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>            
    );
}

在 react-typescript 中导入 html 文件

import html file in react-typescript

html

javascript

typescript

reactjs

react-typescript

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

2。将文件重命名为 typescript

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