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

この質問の目的は、React コンポーネントにインラインスクリプトを追加する方法を検討することです。ユーザーは、インラインスクリプトタグと、dangerlySetInnerHTML プロパティの両方を使用して外部スクリプトをロードしようとしましたが、どちらのアプローチでも目的のスクリプトを実行できないようです。

提案される解決策の 1 つは、React コンポーネントでcomponentDidMount メソッドを作成し、動的に実行することです。スクリプト要素を作成して DOM に追加します。このアプローチにより、コンポーネントのマウント時にスクリプトが 1 回だけ実行されることが保証されます。

ただし、React で推奨されるより新しいアプローチは、useEffect フックを使用することです。このフックを使用すると、コンポーネントのレンダリング後に API 呼び出しや DOM の操作などの副作用を実行できます。

次のコードスニペットは、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);
  }
}, []);

ログイン後にコピー

このコードをカスタムフックでラップすると、複数のコンポーネントで再利用可能になります:

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

ログイン後にコピー

どれを使用できますか以下のように:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // Rest of the component
}

ログイン後にコピー

カスタムスクリプトフックで useEffect フックを利用すると、React コンポーネントでスクリプトをロードして実行するクリーンで効率的な方法が提供されます。

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