You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/script.md
+20-23Lines changed: 20 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,9 @@
1
-
```html
2
1
---
3
2
script: "<script>"
4
3
---
5
-
6
4
<Intro>
7
5
8
-
Встроенный в браузер компонент `<script>` позволяет добавить скрипт в ваш документ.
6
+
Встроенный браузерный компонент `<script>` позволяет добавить скрипт в ваш документ.
9
7
10
8
```js
11
9
<script>alert("hi!") </script>
@@ -21,65 +19,65 @@ script: "<script>"
21
19
22
20
### `<script>` {/*script*/}
23
21
24
-
Чтобы добавить встроенные или внешние скрипты в ваш документ, используйте встроенный в браузер компонент `<script>`. Вы можете рендерить `<script>` из любого компонента, и React [в некоторых случаях](#special-rendering-behavior) поместит соответствующий DOM-элемент в `<head>` документа и будет дедуплицировать идентичные скрипты.
22
+
Чтобы добавить встроенные или внешние скрипты в ваш документ, используйте встроенный браузерный компонент `<script>`. Вы можете рендерить `<script>` из любого компонента, и React [в некоторых случаях](#special-rendering-behavior) поместит соответствующий DOM-элемент в `<head>` документа и будет дедуплицировать идентичные скрипты.
25
23
26
24
```js
27
25
<script>alert("hi!") </script>
28
26
<script src="script.js"/>
29
27
```
30
28
31
-
[См. больше примеров ниже.](#usage)
29
+
[См. примеры ниже.](#usage)
32
30
33
31
#### Пропсы {/*props*/}
34
32
35
33
`<script>` поддерживает все [общие пропсы элементов.](/reference/react-dom/components/common#props)
36
34
37
-
Он должен иметь *либо* `children`, *либо* пропс `src`.
35
+
Он должен иметь либо `children`, либо пропс `src`.
38
36
39
37
*`children`: строка. Исходный код встроенного скрипта.
40
38
*`src`: строка. URL внешнего скрипта.
41
39
42
40
Другие поддерживаемые пропсы:
43
41
44
-
* `async`: булево значение. Позволяет браузеру отложить выполнение скрипта до тех пор, пока остальная часть документа не будет обработана — предпочтительное поведение для производительности.
42
+
*`async`: булево значение. Позволяет браузеру отложить выполнение скрипта до тех пор, пока остальная часть документа не будет обработана — это предпочтительное поведение для производительности.
45
43
*`crossOrigin`: строка. Используемая [политика CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). Возможные значения: `anonymous` и `use-credentials`.
46
-
* `fetchPriority`: строка. Позволяет браузеру ранжировать скрипты по приоритету при одновременной загрузке нескольких скриптов. Может быть `"high"`, `"low"` или `"auto"` (по умолчанию).
44
+
*`fetchPriority`: строка. Позволяет браузеру определять приоритет скриптов при одновременной загрузке нескольких скриптов. Может быть `"high"`, `"low"` или `"auto"` (по умолчанию).
47
45
*`integrity`: строка. Криптографический хеш скрипта для [проверки его подлинности](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
48
-
* `noModule`: булево значение. Отключает скрипт в браузерах, поддерживающих ES-модули — позволяя использовать запасной скрипт для браузеров, которые их не поддерживают.
46
+
*`noModule`: булево значение. Отключает скрипт в браузерах, поддерживающих ES-модули, позволяя использовать резервный скрипт для браузеров, которые их не поддерживают.
49
47
*`nonce`: строка. Криптографический [nonce для разрешения ресурса](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) при использовании строгой политики безопасности контента (Content Security Policy).
50
48
*`referrer`: строка. Указывает, какой [заголовок Referer отправлять](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) при загрузке скрипта и любых ресурсов, которые скрипт загружает в свою очередь.
51
49
*`type`: строка. Указывает, является ли скрипт [классическим скриптом, ES-модулем или картой импорта](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type).
52
50
53
-
Пропсы, отключающие [специальное поведение React для скриптов](#special-rendering-behavior):
* `onError`: функция. Вызывается, когда скрипт не удаётся загрузить.
53
+
*`onError`: функция. Вызывается, когда скрипт не удалось загрузить.
56
54
*`onLoad`: функция. Вызывается, когда скрипт успешно загружен.
57
55
58
56
Пропсы, которые **не рекомендуется** использовать с React:
59
57
60
-
* `blocking`: строка. Если установлено значение `"render"`, браузеру предписывается не отображать страницу до загрузки скрипта. React предоставляет более детальный контроль с помощью Suspense.
58
+
*`blocking`: строка. Если установлено значение `"render"`, браузеру предписывается не рендерить страницу до тех пор, пока не будет загружен скрипт. React предоставляет более детальный контроль с помощью Suspense.
61
59
*`defer`: строка. Предотвращает выполнение скрипта браузером до завершения загрузки документа. Несовместимо со стриминговыми серверно-отрендеренными компонентами. Вместо этого используйте пропс `async`.
62
60
63
-
#### Специальное поведение рендеринга {/*special-rendering-behavior*/}
61
+
#### Особое поведение при рендеринге {/*special-rendering-behavior*/}
64
62
65
63
React может перемещать компоненты `<script>` в `<head>` документа и дедуплицировать идентичные скрипты.
66
64
67
-
Чтобы использовать это поведение, предоставьте пропсы `src` и `async={true}`. React будет дедуплицировать скрипты, если у них одинаковый `src`. Пропс `async` должен быть `true`, чтобы скрипты можно было безопасно перемещать.
65
+
Чтобы использовать это поведение, предоставьте пропсы `src` и `async={true}`. React будет дедуплицировать скрипты, если они имеют одинаковый `src`. Пропс `async` должен быть `true`, чтобы скрипты можно было безопасно перемещать.
68
66
69
-
Это специальное поведение имеет два нюанса:
67
+
Эта специальная обработка имеет два нюанса:
70
68
71
69
* React будет игнорировать изменения пропсов после рендеринга скрипта. (В режиме разработки React выдаст предупреждение, если это произойдет.)
72
-
* React может оставить скрипт в DOM даже после того, как компонент, который его рендерил, будет размонтирован. (Это не имеет значения, так как скрипты выполняются только один раз при вставке в DOM.)
70
+
* React может оставить скрипт в DOM даже после того, как компонент, который его рендерил, был размонтирован. (Это не имеет значения, так как скрипты выполняются только один раз при вставке в DOM.)
Если компонент зависит от определённых скриптов для корректного отображения, вы можете рендерить `<script>` внутри компонента.
81
-
Однако компонент может быть зафиксирован до того, как скрипт будет полностью загружен.
82
-
Вы можете начать использовать содержимое скрипта после срабатывания события `load`, например, с помощью пропса `onLoad`.
78
+
Если компонент зависит от определенных скриптов для корректного отображения, вы можете рендерить `<script>` внутри компонента.
79
+
Однако компонент может быть закоммичен до того, как скрипт завершит загрузку.
80
+
Вы можете начать зависеть от содержимого скрипта после срабатывания события `load`, например, используя пропс`onLoad`.
83
81
84
82
React будет дедуплицировать скрипты с одинаковым `src`, вставляя только один из них в DOM, даже если несколько компонентов рендерят его.
85
83
@@ -109,12 +107,12 @@ export default function Page() {
109
107
</SandpackWithHTMLOutput>
110
108
111
109
<Note>
112
-
Когда вы хотите использовать скрипт, может быть полезно вызвать функцию [preinit](/reference/react-dom/preinit). Вызов этой функции может позволить браузеру начать загрузку скрипта раньше, чем если бы вы просто рендерили компонент `<script>`, например, отправив [HTTP Early Hints ответ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
110
+
Когда вы хотите использовать скрипт, может быть полезно вызвать функцию [preinit](/reference/react-dom/preinit). Вызов этой функции может позволить браузеру начать загрузку скрипта раньше, чем если бы вы просто рендерили компонент `<script>`, например, отправив ответ [HTTP Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
Чтобы включить встроенный скрипт, рендерите компонент `<script>` с исходным кодом скрипта в качестве его дочерних элементов. Встроенные скрипты не дедуплицируются и не перемещаются в `<head>` документа.
115
+
Чтобы включить встроенный скрипт, рендерьте компонент `<script>` с исходным кодом скрипта в качестве его дочерних элементов. Встроенные скрипты не дедуплицируются и не перемещаются в `<head>` документа.
118
116
119
117
<SandpackWithHTMLOutput>
120
118
@@ -140,5 +138,4 @@ export default function Page() {
0 commit comments