組み込みブラウザの<script>コンポーネントを使用すると、ドキュメントにスクリプトを追加できます。

<script> alert("hi!") </script>

リファレンス

<script>

ドキュメントにインラインまたは外部スクリプトを追加するには、組み込みブラウザの<script>コンポーネントをレンダリングします。<script>は任意のコンポーネントからレンダリングでき、Reactは特定のケースで対応するDOM要素をドキュメントのheadに配置し、同一のスクリプトの重複を削除します。

<script> alert("hi!") </script>
<script src="script.js" />

以下の例を参照してください。

プロパティ

<script>は、すべての共通の要素プロパティをサポートしています。

childrenまたはsrcプロパティのどちらか一方が必要です。

  • children: 文字列。インラインスクリプトのソースコード。
  • src: 文字列。外部スクリプトのURL。

その他のサポートされているプロパティ

  • async: ブーリアン。ブラウザがドキュメントの残りの処理が完了するまでスクリプトの実行を遅らせることができます。パフォーマンスのためには、これが推奨される動作です。
  • crossOrigin: 文字列。CORSポリシーを指定します。可能な値はanonymousとuse-credentialsです。
  • fetchPriority: 文字列。ブラウザが複数のスクリプトを同時にフェッチする場合の優先順位を設定します。"high"、"low"、または"auto"（デフォルト）を指定できます。
  • integrity: 文字列。スクリプトの暗号学的ハッシュで、整合性を検証するために使用されます。
  • noModule: ブーリアン。ESモジュールをサポートするブラウザではスクリプトを無効にします。サポートしないブラウザ用のフォールバックスクリプトを許可します。
  • nonce: 文字列。厳格なコンテンツセキュリティポリシーを使用する場合にリソースを許可するための暗号学的nonceです。
  • referrer: 文字列。スクリプトとスクリプトが順番にフェッチするリソースをフェッチするときに送信するRefererヘッダーを指定します。
  • type: 文字列。スクリプトが従来のスクリプト、ESモジュール、またはインポートマップのいずれであるかを指定します。

Reactのスクリプトの特別な処理を無効にするプロパティ

  • onError: 関数。スクリプトの読み込みに失敗した場合に呼び出されます。
  • onLoad: 関数。スクリプトの読み込みが完了した場合に呼び出されます。

Reactでの使用は推奨されませんプロパティ

  • blocking: 文字列。"render"に設定されている場合、スクリプトシートが読み込まれるまでページのレンダリングをブラウザに指示します。ReactはSuspenseを使用してより細かい制御を提供します。
  • defer: 文字列。ドキュメントの読み込みが完了するまで、ブラウザがスクリプトを実行するのを防ぎます。ストリーミングサーバーレンダリングコンポーネントと互換性がありません。代わりにasyncプロパティを使用してください。

特別なレンダリング動作

Reactは<script>コンポーネントをドキュメントの<head>に移動し、同一のスクリプトを重複排除できます。

この動作を有効にするには、srcとasync={true}プロパティを指定します。Reactはsrcが同じスクリプトを重複排除します。スクリプトを安全に移動するには、asyncプロパティをtrueにする必要があります。

この特別な処理には2つの注意点があります。

  • スクリプトがレンダリングされた後、プロパティの変更はReactによって無視されます。（開発モードでは、これが発生した場合に警告が表示されます。）
  • レンダリングしたコンポーネントがアンマウントされた後も、ReactはスクリプトをDOMに残しておく場合があります。（スクリプトはDOMに挿入されたときに一度だけ実行されるため、これは影響を与えません。）

使用方法

外部スクリプトのレンダリング

コンポーネントが正しく表示されるために特定のスクリプトに依存している場合、コンポーネント内に<script>をレンダリングできます。ただし、スクリプトの読み込みが完了する前にコンポーネントがコミットされる可能性があります。例えばonLoadプロパティを使用して、loadイベント（例：`load`イベントが発生した際に）がトリガーされた後にスクリプトの内容に依存し始めることができます。

Reactはsrcが同じスクリプトを重複排除し、複数のコンポーネントがレンダリングしても、DOMに1つだけ挿入します。

import ShowRenderedHTML from './ShowRenderedHTML.js';

function Map({lat, long}) {
  return (
    <>
      <script async src="map-api.js" onLoad={() => console.log('script loaded')} />
      <div id="map" data-lat={lat} data-long={long} />
    </>
  );
}

export default function Page() {
  return (
    <ShowRenderedHTML>
      <Map />
    </ShowRenderedHTML>
  );
}

注記

スクリプトを使用する場合は、preinit関数を呼び出すと便利です。この関数を呼び出すと、単に<script>コンポーネントをレンダリングする場合よりも早くブラウザがスクリプトのフェッチを開始できる可能性があります。例えば、HTTP Early Hintsレスポンスを送信することによってです。

インラインスクリプトのレンダリング

インラインスクリプトを含めるには、スクリプトのソースコードを子要素として<script>コンポーネントをレンダリングします。インラインスクリプトは重複排除されず、ドキュメントの<head>に移動されません。

import ShowRenderedHTML from './ShowRenderedHTML.js';

function Tracking() {
  return (
    <script>
      ga('send', 'pageview');
    </script>
  );
}

export default function Page() {
  return (
    <ShowRenderedHTML>
      <h1>My Website</h1>
      <Tracking />
      <p>Welcome</p>
    </ShowRenderedHTML>
  );
}
前へ<meta>
次へ<style>