<script>

Компонент браузера встроенный <script> позволяет добавить скрипт в ваш документ.

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

Справочник
- <script>
Использование
- Отображение внешнего скрипта
- Отображение встроенного скрипта

Справочник

`<script>`

Чтобы добавить встроенные или внешние скрипты в свой документ, отобразите компонент браузера встроенный <script>. Вы можете отобразить <script> из любого компонента, и React в определенных случаях поместит соответствующий элемент DOM в заголовок документа и избавится от дублирования идентичных скриптов.

<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 для разрешения ресурса при использовании строгой политики Content Security Policy.
referrer: строка. Указывает какой заголовок Referer отправлять при получении скрипта и любых ресурсов, которые скрипт в свою очередь получает.
type: строка. Указывает, является ли скрипт классическим скриптом, ES-модулем или import map.

Свойства, которые отключают специальное обращение React со скриптами:

onError: функция. Вызывается, когда скрипт не загрузился.
onLoad: функция. Вызывается, когда скрипт завершил загрузку.

Свойства, использование которых с React не рекомендуется:

blocking: строка. Если установлено значение "render", браузеру даётся указание не отображать страницу до загрузки скрипта. React предоставляет более точный контроль с помощью Suspense.
defer: строка. Препятствует выполнению скрипта браузером до завершения загрузки документа. Несовместимо с потоковой передачей серверно рендеренных компонентов. Используйте свойство async вместо этого.

Особое поведение при отображении

React может перемещать <script> компоненты в <head> документа и устранять дублирование идентичных скриптов.

Чтобы включить это поведение, укажите свойства src и async={true}. React будет устранять дублирование скриптов, если у них одинаковый src. Свойство async должно быть установлено в true, чтобы разрешить безопасное перемещение скриптов.

Это специальное обращение имеет два нюанса:

React игнорирует изменения свойств после отображения скрипта. (React выведет предупреждение в режиме разработки, если это произойдёт.)
React может оставить скрипт в DOM даже после того, как компонент, который его отобразил, был отсоединён. (Это не оказывает никакого влияния, так как скрипты выполняются только один раз при их вставке в DOM.)

Использование

Отображение внешнего скрипта

Если компонент зависит от определённых скриптов для корректного отображения, вы можете отобразить <script> внутри компонента. Однако компонент может быть отображен до того, как скрипт завершит загрузку. Вы можете начать использовать содержимое скрипта после срабатывания события load, например, используя свойство onLoad.

React будет дедуплицировать скрипты, у которых одинаковый src, вставляя в DOM только один из них, даже если несколько компонентов его отображают.

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

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/reference/react-dom/components/script