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 サイトの他の関連記事を参照してください。