React/JSX コンポーネントにスクリプトタグを効率的に追加するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-09 04:48:10

オリジナル

1065 人が閲覧しました

How to Efficiently Add Script Tags to React/JSX Components?

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