ホームページ > ウェブフロントエンド > jsチュートリアル > React でスクリプトタグを動的に追加するにはどうすればよいですか?

React でスクリプトタグを動的に追加するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-14 07:55:10
オリジナル
231 人が閲覧しました

How to Dynamically Add Script Tags in React?

React/JSX へのスクリプト タグの追加

動的スクリプトの読み込みについては、考慮すべきアプローチがいくつかあります。

オプション 1: ComponentDidMount ライフサイクル メソッドの使用

必要なスクリプトの場合コンポーネントがマウントされるときに一度だけ実行される場合は、componentDidMount メソッドを利用できます:

componentDidMount() {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}
ログイン後にコピー

オプション 2: useEffect フックを使用する

React でのフックの出現によりuseEffect はより簡潔で再利用可能です。解決策:

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);
ログイン後にコピー

オプション 3: スクリプトを動的に取得して実行する

スクリプトを複数回取得して実行する必要がある場合は、より動的なアプローチが必要です。

fetch('https://use.typekit.net/foobar.js')
  .then(res => res.text())
  .then(scriptText => {
    const script = document.createElement('script');

    script.text = scriptText;

    document.body.appendChild(script);
  });
ログイン後にコピー

モジュール/パッケージを検討するアプローチ

ただし、動的スクリプトの読み込みに頼る前に、必要なスクリプトが npm 経由でモジュールまたはパッケージとして利用可能かどうかを最初に確認することを常にお勧めします。このアプローチにはいくつかの利点があります。

  • コードをクリーンにインポートできる
  • パッケージの更新を簡単に管理できる
  • 組み込みのエラー処理メカニズムを利用できる可能性

以上がReact でスクリプトタグを動的に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート