<script> (Canary) — React 18

Canary

Расширения React для <script> в настоящее время доступны только в каналах Canary и экспериментальных каналах React. В стабильных релизах React <script> работает только как встроенный браузерный HTML-компонент встроенный браузерный HTML-компонент. Узнайте больше о каналах выпуска React здесь.

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

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

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

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

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

Специальное поведение отображения

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

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

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

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

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

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

Если компонент зависит от определённых скриптов для корректного отображения, вы можете отрисовать <script> внутри компонента. Однако, компонент может быть завершён до того, как скрипт завершит загрузку. Вы можете начать использовать содержимое скрипта после того, как будет вызвано событие load, например, используя prop 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://18.react.dev/reference/react-dom/components/script

- Эта функция доступна в последней версии Canary