diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 04d69287c..1925bf75a 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -4,7 +4,7 @@ title: forwardRef -`forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs) +`forwardRef` permite que seu componente exponha um nó do DOM para o componente pai com um [ref.](/learn/manipulating-the-dom-with-refs) ```js const SomeComponent = forwardRef(render) @@ -16,11 +16,11 @@ const SomeComponent = forwardRef(render) --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `forwardRef(render)` {/*forwardref*/} -Call `forwardRef()` to let your component receive a ref and forward it to a child component: +Chame `forwardRef()` para permitir que seu componente receba um ref e o encaminhe para um componente filho: ```js import { forwardRef } from 'react'; @@ -30,26 +30,25 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) -#### Parameters {/*parameters*/} +#### Parâmetros {/*parameters*/} -* `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. +* `render`: A função de renderização para seu componente. O React chama essa função com os props e o `ref` que seu componente recebeu do seu pai. O JSX que você retornar será a saída do seu componente. -#### Returns {/*returns*/} +#### Retornos {/*returns*/} -`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. +`forwardRef` retorna um componente React que você pode renderizar em JSX. Diferentemente dos componentes React definidos como funções simples, um componente retornado por `forwardRef` também é capaz de receber um prop `ref`. -#### Caveats {/*caveats*/} - -* 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. +#### Ressalvas {/*caveats*/} +* No Modo Estrito, o React **chamará sua função de renderização duas vezes** para [ajudar você a encontrar impurezas acidentais.](/reference/react/useState#my-initializer-or-updater-function-runs-twice) Esse é um comportamento exclusivo para desenvolvimento e não afeta a produção. Se sua função de renderização for pura (como deve ser), isso não deve afetar a lógica do seu componente. O resultado de uma das chamadas será ignorado. --- -### `render` function {/*render-function*/} +### Função `render` {/*render-function*/} -`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`: +`forwardRef` aceita uma função de renderização como argumento. O React chama essa função com `props` e `ref`: ```js const MyInput = forwardRef(function MyInput(props, ref) { @@ -62,23 +61,23 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -#### Parameters {/*render-parameters*/} +#### Parâmetros {/*render-parameters*/} -* `props`: The props passed by the parent component. +* `props`: Os props passados pelo componente pai. -* `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) +* `ref`: O atributo `ref` passado pelo componente pai. O `ref` pode ser um objeto ou uma função. Se o componente pai não passou um ref, será `null`. Você deve passar o `ref` que receber a outro componente, ou passá-lo para [`useImperativeHandle`.](/reference/react/useImperativeHandle) -#### Returns {/*render-returns*/} +#### Retornos {/*render-returns*/} -`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. +`forwardRef` retorna um componente React que você pode renderizar em JSX. Diferentemente dos componentes React definidos como funções simples, o componente retornado por `forwardRef` é capaz de aceitar um prop `ref`. --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/} +### Expondo um nó do DOM para o componente pai {/*exposing-a-dom-node-to-the-parent-component*/} -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()`: +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 que ele seja focado. Para optar por isso, envolva a definição do seu componente em `forwardRef()`: ```js {3,11} import { forwardRef } from 'react'; @@ -94,7 +93,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -You will receive a ref as the second argument after props. Pass it to the DOM node that you want to expose: +Você receberá um ref como o segundo argumento após os props. Passe-o para o nó do DOM que você deseja expor: ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]] import { forwardRef } from 'react'; @@ -110,7 +109,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -This lets the parent `Form` component access the `` DOM node exposed by `MyInput`: +Isso permite que o componente pai `Form` acesse o nó DOM `` exposto por `MyInput`: ```js [[1, 2, "ref"], [1, 10, "ref", 41], [2, 5, "ref.current"]] function Form() { @@ -122,24 +121,24 @@ function Form() { return (
- + ); } ``` -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 `` browser tag. As a result, the `Form` component can access that `` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it. +Esse componente `Form` [passa um ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) para `MyInput`. O componente `MyInput` *encaminha* esse ref para a tag do navegador ``. Como resultado, o componente `Form` pode acessar esse nó DOM `` e chamar [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) nele. -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. +Lembre-se de que expor um ref para o nó do DOM dentro do seu componente torna mais difícil alterar os internals do seu componente posteriormente. Você normalmente exporá nós do DOM de componentes reutilizáveis de baixo nível, como botões ou campos de texto, mas não fará isso para componentes de nível de aplicativo, como um avatar ou um comentário. - + -#### Focusing a text input {/*focusing-a-text-input*/} +#### Focando um campo de texto {/*focusing-a-text-input*/} -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 ``. This lets the `Form` component focus the ``. +Clicar no botão focará o campo de entrada. O componente `Form` define um ref e o passa para o componente `MyInput`. O componente `MyInput` encaminha esse ref para o navegador ``. Isso permite que o componente `Form` foque o ``. @@ -156,9 +155,9 @@ export default function Form() { return (
- + ); @@ -191,9 +190,9 @@ input { -#### Playing and pausing a video {/*playing-and-pausing-a-video*/} +#### Reproduzindo e pausando um vídeo {/*playing-and-pausing-a-video*/} -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 `