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
+41-41Lines changed: 41 additions & 41 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,13 +5,13 @@ canary: true
5
5
6
6
<Canary>
7
7
8
-
React's extensions to`<script>`are currently only available in React's canary and experimental channels. In stable releases of React `<script>`works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
8
+
As extensões de`<script>`do React estão disponíveis atualmente apenas nos canais canary e experimental do React. Nas versões estáveis do React,`<script>`funciona apenas como um [componente HTML embutido do navegador](https://react.dev/reference/react-dom/components#all-html-components). Saiba mais sobre [os canais de versão do React aqui](/community/versioning-policy#all-release-channels).
9
9
10
10
</Canary>
11
11
12
12
<Intro>
13
13
14
-
The [built-in browser `<script>`component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)lets you add a script to your document.
14
+
O [componente `<script>`embutido do navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)permite adicionar um script ao seu documento.
15
15
16
16
```js
17
17
<script>alert("hi!") </script>
@@ -23,71 +23,71 @@ The [built-in browser `<script>` component](https://developer.mozilla.org/en-US/
23
23
24
24
---
25
25
26
-
## Reference {/*reference*/}
26
+
## Referência {/*reference*/}
27
27
28
28
### `<script>` {/*script*/}
29
29
30
-
To add inline or external scripts to your document, render the [built-in browser `<script>`component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). You can render`<script>`from any component and React will [in certain cases](#special-rendering-behavior)place the corresponding DOM element in the document head and de-duplicate identical scripts.
30
+
Para adicionar scripts inline ou externos ao seu documento, renderize o [componente `<script>`embutido do navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). Você pode renderizar`<script>`de qualquer componente e o React [em certos casos](#special-rendering-behavior)colocará o elemento DOM correspondente no cabeçalho do documento e deduplicará scripts idênticos.
31
31
32
32
```js
33
33
<script>alert("hi!") </script>
34
34
<script src="script.js"/>
35
35
```
36
36
37
-
[See more examples below.](#usage)
37
+
[Veja mais exemplos abaixo.](#usage)
38
38
39
39
#### Props {/*props*/}
40
40
41
-
`<script>`supports all [common element props.](/reference/react-dom/components/common#props)
41
+
`<script>`suporta todas as [props comuns de elementos](/reference/react-dom/components/common#props)
42
42
43
-
It should have *either*`children`or a `src` prop.
43
+
Deve ter *ou*`children`ou uma prop `src`.
44
44
45
-
*`children`: a string. The source code of an inline script.
46
-
*`src`: a string. The URL of an external script.
45
+
*`children`: uma string. O código fonte de um script inline.
46
+
*`src`: uma string. A URL de um script externo.
47
47
48
-
Other supported props:
48
+
Outras props suportadas:
49
49
50
-
*`async`: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed — the preferred behavior for performance.
51
-
*`crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)to use. Its possible values are`anonymous`and`use-credentials`.
52
-
*`fetchPriority`: a string. Lets the browser rank scripts in priority when fetching multiple scripts at the same time. Can be`"high"`, `"low"`, or`"auto"` (the default).
53
-
*`integrity`: a string. A cryptographic hash of the script, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
54
-
*`noModule`: a boolean. Disables the script in browsers that support ES modules — allowing for a fallback script for browsers that do not.
55
-
*`nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)when using a strict Content Security Policy.
56
-
*`referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy)when fetching the script and any resources that the script fetches in turn.
57
-
*`type`: a string. Says whether the script is a [classic script, ES module, or import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type).
50
+
*`async`: um booleano. Permite que o navegador adie a execução do script até que o resto do documento tenha sido processado — o comportamento preferido para desempenho.
51
+
*`crossOrigin`: uma string. A [política CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)a ser utilizada. Seus valores possíveis são`anonymous`e`use-credentials`.
52
+
*`fetchPriority`: uma string. Permite que o navegador classifique scripts em prioridade ao buscar múltiplos scripts ao mesmo tempo. Pode ser`"high"`, `"low"` ou`"auto"` (o padrão).
53
+
*`integrity`: uma string. Um hash criptográfico do script, para [verificar sua autenticidade](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
54
+
*`noModule`: um booleano. Desabilita o script em navegadores que suportam módulos ES — permitindo um script alternativa para navegadores que não o suportam.
55
+
*`nonce`: uma string. Um [nonce criptográfico para permitir o recurso](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)ao usar uma política de segurança de conteúdo estrita.
56
+
*`referrer`: uma string. Indica [qual cabeçalho Referer enviar](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy)ao buscar o script e quaisquer recursos que o script buscar por sua vez.
57
+
*`type`: uma string. Indica se o script é um [script clássico, módulo ES ou mapa de importação](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type).
58
58
59
-
Props that disable React's [special treatment of scripts](#special-rendering-behavior):
59
+
Props que desabilitam o [tratamento especial de scripts do React](#special-rendering-behavior):
60
60
61
-
*`onError`: a function. Called when the script fails to load.
62
-
*`onLoad`: a function. Called when the script finishes being loaded.
61
+
*`onError`: uma função. Chamado quando o script falha ao carregar.
62
+
*`onLoad`: uma função. Chamado quando o script termina de ser carregado.
63
63
64
-
Props that are **not recommended**for use with React:
64
+
Props que **não são recomendadas**para uso com o React:
65
65
66
-
*`blocking`: a string. If set to`"render"`, instructs the browser not to render the page until the scriptsheet is loaded. React provides more fine-grained control using Suspense.
67
-
*`defer`: a string. Prevents the browser from executing the script until the document is done loading. Not compatible with streaming server-rendered components. Use the `async`prop instead.
66
+
*`blocking`: uma string. Se definida como`"render"`, instrui o navegador a não renderizar a página até que a planilha de scripts esteja carregada. O React fornece um controle mais detalhado usando Suspense.
67
+
*`defer`: uma string. Impede que o navegador execute o script até que o documento tenha terminado de carregar. Não é compatível com componentes renderizados no servidor em streaming. Use a prop `async`em vez disso.
68
68
69
-
#### Special rendering behavior {/*special-rendering-behavior*/}
69
+
#### Comportamento de renderização especial {/*special-rendering-behavior*/}
70
70
71
-
React can move `<script>`components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense)while the script is loading.
71
+
O React pode mover componentes `<script>`para o `<head>` do documento, deduplicar scripts idênticos e [suspender](/reference/react/Suspense)enquanto o script está carregando.
72
72
73
-
To opt into this behavior, provide the `src`and`async={true}` props. React will de-duplicate scripts if they have the same`src`. The `async`prop must be true to allow scripts to be safely moved.
73
+
Para optar por esse comportamento, forneça as props `src`e`async={true}`. O React deduplicará scripts se eles tiverem o mesmo`src`. A prop `async`deve ser verdadeira para permitir que os scripts sejam movidos com segurança.
74
74
75
-
If you supply any of the `onLoad`or`onError` props, there is no special behavior, because these props indicate that you are managing the loading of the script manually within your component.
75
+
Se você fornecer qualquer uma das props `onLoad`ou`onError`, não haverá comportamento especial, pois essas props indicam que você está gerenciando o carregamento do script manualmente dentro do seu componente.
76
76
77
-
This special treatment comes with two caveats:
77
+
Esse tratamento especial vem com duas ressalvas:
78
78
79
-
* React will ignore changes to props after the script has been rendered. (React will issue a warning in development if this happens.)
80
-
* React may leave the script in the DOM even after the component that rendered it has been unmounted. (This has no effect as scripts just execute once when they are inserted into the DOM.)
79
+
*O React ignorará alterações nas props após o script ter sido renderizado. (O React emitirá um aviso em desenvolvimento se isso acontecer.)
80
+
*O React pode deixar o script no DOM mesmo depois que o componente que o renderizou tenha sido desmontado. (Isso não tem efeito, pois os scripts são executados apenas uma vez quando são inseridos no DOM.)
81
81
82
82
---
83
83
84
-
## Usage {/*usage*/}
84
+
## Uso {/*usage*/}
85
85
86
-
### Rendering an external script {/*rendering-an-external-script*/}
86
+
### Renderizando um script externo {/*rendering-an-external-script*/}
87
87
88
-
If a component depends on certain scripts in order to be displayed correctly, you can render a`<script>`within the component.
88
+
Se um componente depende de certos scripts para ser exibido corretamente, você pode renderizar um`<script>`dentro do componente.
89
89
90
-
If you supply an `src`and`async` prop, your component will suspend while the script is loading. React will de-duplicate scripts that have the same`src`, inserting only one of them into the DOM even if multiple components render it.
90
+
Se você fornecer as props `src`e`async`, seu componente será suspenso enquanto o script estiver carregando. O React deduplicará scripts que têm o mesmo`src`, inserindo apenas um deles no DOM mesmo que múltiplos componentes o renderizem.
91
91
92
92
<SandpackWithHTMLOutput>
93
93
@@ -115,12 +115,12 @@ export default function Page() {
115
115
</SandpackWithHTMLOutput>
116
116
117
117
<Note>
118
-
When you want to use a script, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the script earlier than if you just render a `<script>` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
118
+
Quando você deseja usar um script, pode ser benéfico chamar a função [preinit](/reference/react-dom/preinit). Chamar essa função pode permitir que o navegador comece a buscar o script mais cedo do que se você apenas renderizar um componente `<script>`, por exemplo, enviando uma [resposta de Dicas Iniciais HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
119
119
</Note>
120
120
121
-
### Rendering an inline script {/*rendering-an-inline-script*/}
121
+
### Renderizando um script inline {/*rendering-an-inline-script*/}
122
122
123
-
To include an inline script, render the `<script>`component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`, and since they don't load any external resources, they will not cause your component to suspend.
123
+
Para incluir um script inline, renderize o componente `<script>`com o código fonte do script como seus filhos. Scripts inline não são deduplicados ou movidos para o `<head>` do documento e, como não carregam nenhum recurso externo, não causarão a suspensão do seu componente.
0 commit comments