React/JSX コンポーネントにスクリプトタグを効率的に追加するにはどうすればよいですか?

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

React/JSX では、インライン スクリプトを組み込む方法がいくつかあります。考えられる解決策の 1 つは、スクリプトを DOM にマウントする関数をコンポーネント内に作成することです。例:

componentDidMount() {
  const script = document.createElement("script");
  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;
  document.body.appendChild(script);
}

ただし、スクリプトが DOM にすでに存在する場合、または複数回ロードする必要がある場合、この方法は理想的ではありません。

より効果的なアプローチは、パッケージを利用することです。 npm のようなマネージャーを使用して、スクリプトをモジュールとしてインストールします。これにより、統合プロセスが簡素化され、インポート用にスクリプトにアクセスできるようになります。

import {useEffect} from 'react';

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);
  };
}, []);

この手法により、コンポーネントがマウントされるときにスクリプトが 1 回だけロードされ、コンポーネントがアンマウントされるときにスクリプトが削除されることが保証されます。

このアプローチをさらに強化するには、スクリプト読み込みプロセスを処理するカスタム フックを作成できます。

import { useEffect } from 'react';

const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

このカスタム フックは、スクリプトを必要とするコンポーネント:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');
  // Rest of the component code
};

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