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

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

React では、dangerlySetInnerHTML を使用するか、スクリプト要素を作成してインライン スクリプトを追加できます。コンポーネントDidMountライフサイクルメソッド。

dangerouslySetInnerHTML の使用

生の HTML を文字列として指定できますが、セキュリティ上の脆弱性が生じる可能性があるため、注意して使用する必要があることに注意することが重要です。例:

<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>

ただし、この方法では、常に目的のスクリプトが実行されるとは限りません。

componentDidMount でのスクリプト要素の作成

次の点を考慮してください:

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

このメソッドコンポーネントのマウント時にスクリプトを DOM に動的に挿入します。

推奨アプローチ: npm パッケージの使用

import Typekit from 'typekit';

インライン スクリプトを使用する前に、事前にスクリプトが実行されているかどうかを確認することをお勧めします。 -built npm パッケージは、ロードするスクリプトに使用できます。たとえば、Typekit をロードしたい場合は、次のように typekit パッケージをインストールしてインポートできます:

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

フックの導入により、useEffect を使用してスクリプトをさらに読み込むことができます。効率的に:

簡単に再利用できるように、このロジックをカスタム フックにラップすることもできます。

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