在 react-typescript 中導入 html 文件

Question

我正在嘗試將 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>            
    );
}

}

Answer 1

根據反應文檔，您不能使用require關鍵字導入模塊，您必須使用 es6 關鍵字導入您的代碼應該是這樣的

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的SetInnerHTML

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 文件

問題描述

2 個解決方案

解決方案1
0 2021-12-12 17:55:26

解決方案2
0 2021-12-12 18:35:26

1. 給字符串變量添加代碼

2.重命名文件為typescript

3.導入html代碼為字符串化代碼

在 react-typescript 中導入 html 文件

問題描述

2 個解決方案

解決方案1 0 2021-12-12 17:55:26

解決方案2 0 2021-12-12 18:35:26

1. 給字符串變量添加代碼

2.重命名文件為typescript

3.導入html代碼為字符串化代碼

解決方案1
0 2021-12-12 17:55:26

解決方案2
0 2021-12-12 18:35:26