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
*`render`: The render function for your component. React calls this function with the props and`ref`that your component received from its parent. The JSX you return will be the output of your component.
45
+
*`render`: A função de renderização para o seu componente. React chama esta função com as props e`ref`que seu componente recebeu de seu pai. O JSX que você retornar será a saída do seu componente.
46
46
47
-
#### Returns {/*returns*/}
47
+
#### Retorna {/*returns*/}
48
48
49
-
`forwardRef`returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by`forwardRef`is also able to receive a `ref` prop.
49
+
`forwardRef`retorna um componente React que você pode renderizar em JSX. Diferente dos componentes React definidos como funções simples, um componente retornado por`forwardRef`também é capaz de receber uma prop `ref`.
50
50
51
-
#### Caveats {/*caveats*/}
51
+
#### Ressalvas {/*caveats*/}
52
52
53
-
*In Strict Mode, React will **call your render function twice**in order to [help you find accidental impurities.](/reference/react/useState#my-initializer-or-updater-function-runs-twice)This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
53
+
*No Modo Estrito, React **chama sua função de renderização duas vezes**para [ajudá-lo a encontrar impurezas acidentais.](/reference/react/useState#my-initializer-or-updater-function-runs-twice)Este é um comportamento apenas para desenvolvimento e não afeta a produção. Se sua função de renderização for pura (como deveria ser), isso não deve afetar a lógica do seu componente. O resultado de uma das chamadas será ignorado.
54
54
55
55
56
56
---
57
57
58
-
### `render` function {/*render-function*/}
58
+
### Função `render` {/*render-function*/}
59
59
60
-
`forwardRef`accepts a render function as an argument. React calls this function with`props`and`ref`:
60
+
`forwardRef`aceita uma função de renderização como um argumento. React chama essa função com`props`e`ref`:
*`props`: The props passed by the parent component.
75
+
*`props`: As props passadas pelo componente pai.
76
76
77
-
*`ref`: The`ref`attribute passed by the parent component. The`ref`can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref`you receive to another component, or pass it to[`useImperativeHandle`.](/reference/react/useImperativeHandle)
77
+
*`ref`: O atributo`ref`passado pelo componente pai. O`ref`pode ser um objeto ou uma função. Se o componente pai não tiver passado um ref, ele será `null`. Você deve passar o `ref`que você recebe para outro componente, ou passá-lo para[`useImperativeHandle`.](/reference/react/useImperativeHandle)
78
78
79
-
#### Returns {/*render-returns*/}
79
+
#### Retorna {/*render-returns*/}
80
80
81
-
`forwardRef`returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by`forwardRef`is able to take a `ref` prop.
81
+
`forwardRef`retorna um componente React que você pode renderizar em JSX. Diferente dos componentes React definidos como funções simples, o componente retornado por`forwardRef`é capaz de receber uma prop `ref`.
82
82
83
83
---
84
84
85
-
## Usage {/*usage*/}
85
+
## Uso {/*usage*/}
86
86
87
-
### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/}
87
+
### Expondo um nó do DOM para o componente pai {/*exposing-a-dom-node-to-the-parent-component*/}
88
88
89
-
By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into`forwardRef()`:
89
+
Por padrão, os nós do DOM de cada componente são privados. No entanto, às vezes é útil expor um nó do DOM para o pai - por exemplo, para permitir focar nele. Para participar, envolva a definição do seu componente em`forwardRef()`:
This `Form`component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref)to`MyInput`. The `MyInput`component *forwards* that ref to the `<input>` browser tag. As a result, the `Form`component can access that `<input>`DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)on it.
142
+
Este componente `Form`[passa um ref](/reference/react/useRef#manipulating-the-dom-with-a-ref)para`MyInput`. O componente `MyInput`*encaminha* aquele ref para a tag do navegador `<input>`. Como resultado, o componente `Form`pode acessar aquele nó do DOM `<input>`e chamar [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)nele.
143
143
144
-
Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
144
+
Tenha em mente que expor um ref para o nó do DOM dentro do seu componente torna mais difícil alterar o funcionamento interno do seu componente mais tarde. Você tipicamente expõe nós do DOM de componentes reutilizáveis de baixo nível como botões ou entradas de texto, mas você não fará isso para componentes em nível de aplicação como um avatar ou um comentário.
145
145
146
-
<RecipestitleText="Examples of forwarding a ref">
146
+
<RecipestitleText="Exemplos de encaminhamento de um ref">
147
147
148
-
#### Focusing a text input {/*focusing-a-text-input*/}
148
+
#### Focando uma entrada de texto {/*focusing-a-text-input*/}
149
149
150
-
Clicking the button will focus the input. The `Form`component defines a ref and passes it to the `MyInput` component. The `MyInput`component forwards that ref to the browser `<input>`. This lets the `Form`component focus the`<input>`.
150
+
Clicar no botão irá focar a entrada. O componente `Form`define um ref e o passa para o componente `MyInput`. O componente `MyInput`encaminha aquele ref para o `<input>` do navegador. Isso permite que o componente `Form`foque o`<input>`.
151
151
152
152
<Sandpack>
153
153
@@ -199,9 +199,9 @@ input {
199
199
200
200
<Solution />
201
201
202
-
#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
202
+
#### Reproduzindo e pausando um vídeo {/*playing-and-pausing-a-video*/}
203
203
204
-
Clicking the button will call[`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play)and[`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause)on a `<video>` DOM node. The `App`component defines a ref and passes it to the `MyVideoPlayer` component. The `MyVideoPlayer`component forwards that ref to the browser`<video>`node. This lets the `App`component play and pause the`<video>`.
204
+
Clicar no botão irá chamar[`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play)e[`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause)em um nó do DOM `<video>`. O componente `App`define um ref e o passa para o componente `MyVideoPlayer`. O componente `MyVideoPlayer`encaminha aquele ref para o nó`<video>`do navegador. Isso permite que o componente `App`reproduza e pause o`<video>`.
If that `MyInput`component forwards a ref to its`<input>`, a ref to`FormField`will give you that`<input>`:
279
+
Se aquele componente `MyInput`encaminhar um ref para seu`<input>`, um ref para`FormField`lhe dará aquele`<input>`:
280
280
281
281
```js {2,5,10}
282
282
functionForm() {
@@ -297,7 +297,7 @@ function Form() {
297
297
}
298
298
```
299
299
300
-
The `Form`component defines a ref and passes it to`FormField`. The `FormField`component forwards that ref to`MyInput`, which forwards it to a browser `<input>`DOM node. This is how`Form`accesses that DOM node.
300
+
O componente `Form`define um ref e o passa para`FormField`. O componente `FormField`encaminha aquele ref para`MyInput`, que o encaminha para um nó do DOM `<input>`do navegador. É assim que`Form`acessa aquele nó do DOM.
301
301
302
302
303
303
<Sandpack>
@@ -375,9 +375,9 @@ input, button {
375
375
376
376
---
377
377
378
-
### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
378
+
### Expondo um manipulador imperativo em vez de um nó do DOM {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
379
379
380
-
Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,*with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
380
+
Em vez de expor um nó do DOM inteiro, você pode expor um objeto customizado, chamado *manipulador imperativo,*com um conjunto mais restrito de métodos. Para fazer isso, você precisaria definir um ref separado para manter o nó do DOM:
Pass the`ref`you received to [`useImperativeHandle`](/reference/react/useImperativeHandle)and specify the value you want to expose to the`ref`:
392
+
Passe o`ref`que você recebeu para [`useImperativeHandle`](/reference/react/useImperativeHandle)e especifique o valor que você deseja expor para o`ref`:
If some component gets a ref to`MyInput`, it will only receive your`{ focus, scrollIntoView }`object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
415
+
Se algum componente receber um ref para`MyInput`, ele só receberá seu objeto`{ focus, scrollIntoView }`em vez do nó do DOM. Isso permite que você limite a informação que você expõe sobre o seu nó do DOM ao mínimo.
416
416
417
417
<Sandpack>
418
418
@@ -425,7 +425,7 @@ export default function Form() {
425
425
426
426
functionhandleClick() {
427
427
ref.current.focus();
428
-
//This won't work because the DOM node isn't exposed:
428
+
//Isso não vai funcionar porque o nó do DOM não está exposto:
429
429
// ref.current.style.opacity = 0.5;
430
430
}
431
431
@@ -471,25 +471,25 @@ input {
471
471
472
472
</Sandpack>
473
473
474
-
[Read more about using imperative handles.](/reference/react/useImperativeHandle)
474
+
[Leia mais sobre o uso de manipuladores imperativos.](/reference/react/useImperativeHandle)
475
475
476
476
<Pitfall>
477
477
478
-
**Do not overuse refs.**You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
478
+
**Não use demais refs.**Você deve usar refs apenas para comportamentos *imperativos* que você não pode expressar como props: por exemplo, rolar para um nó, focar em um nó, acionar uma animação, selecionar texto, e assim por diante.
479
479
480
-
**If you can express something as a prop, you should not use a ref.**For example, instead of exposing an imperative handle like `{ open, close }`from a `Modal` component, it is better to take `isOpen`as a prop like`<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects)can help you expose imperative behaviors via props.
480
+
**Se você pode expressar algo como uma prop, você não deve usar um ref.**Por exemplo, em vez de expor um manipulador imperativo como `{ open, close }`de um componente `Modal`, é melhor usar `isOpen`como uma prop como`<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects)pode ajudá-lo a expor comportamentos imperativos via props.
481
481
482
482
</Pitfall>
483
483
484
484
---
485
485
486
-
## Troubleshooting {/*troubleshooting*/}
486
+
## Solução de problemas {/*troubleshooting*/}
487
487
488
-
### My component is wrapped in`forwardRef`, but the`ref`to it is always`null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
488
+
### Meu componente está encapsulado em`forwardRef`, mas o`ref`para ele é sempre`null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
489
489
490
-
This usually means that you forgot to actually use the`ref`that you received.
490
+
Isso geralmente significa que você esqueceu de realmente usar o`ref`que você recebeu.
491
491
492
-
For example, this component doesn't do anything with its`ref`:
492
+
Por exemplo, este componente não faz nada com o seu`ref`:
If`showInput`is`false`, then the ref won't be forwarded to any node, and a ref to`MyInput`will remain empty. This is particularly easy to miss if the condition is hidden inside another component, like`Panel`in this example:
531
+
Se`showInput`for`false`, então o ref não será encaminhado para nenhum nó, e um ref para`MyInput`permanecerá vazio. Isso é particularmente fácil de perder se a condição estiver escondida dentro de outro componente, como`Panel`neste exemplo:
0 commit comments