React でスクリプトタグを動的に追加するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-14 07:55:10

オリジナル

236 人が閲覧しました

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 経由でモジュールまたはパッケージとして利用可能かどうかを最初に確認することを常にお勧めします。このアプローチにはいくつかの利点があります。