reactコンポーネント内の非同期読み込みスクリプト

ビル

reactJSX内で外部スクリプトをロードする際に問題が発生しました

<script>
    (function(d) {
        var config = {
                kitId: 1234567,
                scriptTimeout: 3000,
                async: true
            },
            h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
    })(document);
</script>

これが私のrender関数で、javasciptにasynをロードさせたいのですが、htmlファイルでは非常に簡単ですが、reactコンポーネント内で達成方法に驚いています。(別の外部モジュールのインストールを回避できる場合は、最善です)。どうもありがとう

render() {
    return (
        <head>
            //Script to load asyn
        </head>
    )
}
ビル

危険なSetInnerHTMLは私が見つけた解決策です。

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

これにより、スクリプトタグを作成し、jSXの横にJavaScriptを挿入できます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Emberコンポーネントでの非同期読み込み

分類Dev

Webpack DependencyManagementとVue.js非同期コンポーネントの読み込み

分類Dev

バージョン3でのSvelteコンポーネントの非同期読み込み

分類Dev

React / Reduxコンポーネントコンストラクターでのアプリケーション状態の読み込み

分類Dev

状態変化時のAngularコンポーネントスクリプトの遅延読み込み

分類Dev

アンドロイドリストビューアダプター非同期タスク画像の読み込み

分類Dev

Mvcの完全な非同期スクリプトの読み込み

分類Dev

非同期スクリプトの読み込み

分類Dev

Reactフックコンポーネントの再読み込み

分類Dev

Vueコンポーネントの非同期読み込み、マウントされたライフサイクルで未定義の$ refs

分類Dev

コンテンツの非同期読み込み用のリストビューの背景色のないProgressView

分類Dev

react-testing-libraryを使用して非同期データの読み込みを行うコンポーネントをスナップショットテストする方法は?

分類Dev

クラスコンストラクターでの非同期データの読み込み

分類Dev

Angular1コンポーネントの遅延読み込みリクエストエラー

分類Dev

サイク:プリンシパル-コンポーネントの読み込み

分類Dev

コンポーネントの非同期コンテンツが完全に読み込まれたときにスピナーを反応させる

分類Dev

Primefacesコンポーネントでの遅延読み込み

分類Dev

reactでの遅延読み込み-コンポーネントが読み込まれていません

分類Dev

異なるサブドメインからのVue.js非同期コンポーネントの読み込み

分類Dev

Vue:コンポーネント内のライブラリ(Bootstrap-Vue)からの遅延読み込み

分類Dev

SSISはSystem.Object変数を読み取り、スクリプトコンポーネントに書き込みます...どのように?

分類Dev

Blazor-グリッドコンポーネントの再読み込み

分類Dev

reactコンポーネント内のJestモック非同期呼び出し

分類Dev

application.ymlからコンポーネントへの文字列リストの読み込み

分類Dev

非同期のJavaスクリプトの読み込みでエラーが表示されます

分類Dev

クリック時にQMLコンポーネントを読み込む方法

分類Dev

リソースプロジェクトの画像がネストされたコントロール内に読み込まれていません

分類Dev

iOSSwiftのネットワークからのMVVM非同期UIImageの読み込み

分類Dev

vue-router非同期コンポーネントのデフォルトの解決に失敗しました:ChunkLoadError:チャンクベンダーの読み込みに失敗しました〜デモに失敗しました

Related 関連記事

  1. 1

    Emberコンポーネントでの非同期読み込み

  2. 2

    Webpack DependencyManagementとVue.js非同期コンポーネントの読み込み

  3. 3

    バージョン3でのSvelteコンポーネントの非同期読み込み

  4. 4

    React / Reduxコンポーネントコンストラクターでのアプリケーション状態の読み込み

  5. 5

    状態変化時のAngularコンポーネントスクリプトの遅延読み込み

  6. 6

    アンドロイドリストビューアダプター非同期タスク画像の読み込み

  7. 7

    Mvcの完全な非同期スクリプトの読み込み

  8. 8

    非同期スクリプトの読み込み

  9. 9

    Reactフックコンポーネントの再読み込み

  10. 10

    Vueコンポーネントの非同期読み込み、マウントされたライフサイクルで未定義の$ refs

  11. 11

    コンテンツの非同期読み込み用のリストビューの背景色のないProgressView

  12. 12

    react-testing-libraryを使用して非同期データの読み込みを行うコンポーネントをスナップショットテストする方法は?

  13. 13

    クラスコンストラクターでの非同期データの読み込み

  14. 14

    Angular1コンポーネントの遅延読み込みリクエストエラー

  15. 15

    サイク:プリンシパル-コンポーネントの読み込み

  16. 16

    コンポーネントの非同期コンテンツが完全に読み込まれたときにスピナーを反応させる

  17. 17

    Primefacesコンポーネントでの遅延読み込み

  18. 18

    reactでの遅延読み込み-コンポーネントが読み込まれていません

  19. 19

    異なるサブドメインからのVue.js非同期コンポーネントの読み込み

  20. 20

    Vue:コンポーネント内のライブラリ(Bootstrap-Vue)からの遅延読み込み

  21. 21

    SSISはSystem.Object変数を読み取り、スクリプトコンポーネントに書き込みます...どのように?

  22. 22

    Blazor-グリッドコンポーネントの再読み込み

  23. 23

    reactコンポーネント内のJestモック非同期呼び出し

  24. 24

    application.ymlからコンポーネントへの文字列リストの読み込み

  25. 25

    非同期のJavaスクリプトの読み込みでエラーが表示されます

  26. 26

    クリック時にQMLコンポーネントを読み込む方法

  27. 27

    リソースプロジェクトの画像がネストされたコントロール内に読み込まれていません

  28. 28

    iOSSwiftのネットワークからのMVVM非同期UIImageの読み込み

  29. 29

    vue-router非同期コンポーネントのデフォルトの解決に失敗しました:ChunkLoadError:チャンクベンダーの読み込みに失敗しました〜デモに失敗しました

ホットタグ

アーカイブ