Skip to content

Translate createPortal.md to pt-br #881

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
NivaldoFarias wants to merge 1 commit into from
Closed

Translate createPortal.md to pt-br #881

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 55 additions & 56 deletions src/content/reference/react-dom/createPortal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ title: createPortal

<Intro>

`createPortal` lets you render some children into a different part of the DOM.

`createPortal` permite que você renderize alguns filhos em uma parte diferente do DOM.

```js
<div>
Expand All @@ -20,75 +19,75 @@ title: createPortal

---

## Reference {/*reference*/}
## Referência {/*reference*/}

### `createPortal(children, domNode, key?)` {/*createportal*/}

To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered:
Para criar um portal, chame `createPortal`, passando algum JSX e o nó DOM onde ele deve ser renderizado:

```js
import { createPortal } from 'react-dom';

// ...

<div>
<p>This child is placed in the parent div.</p>
<p>Este filho é colocado na div pai.</p>
{createPortal(
<p>This child is placed in the document body.</p>,
<p>Este filho é colocado no corpo do documento.</p>,
document.body
)}
</div>
```

[See more examples below.](#usage)
[Veja mais exemplos abaixo.](#usage)

A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events bubble up from children to parents according to the React tree.
Um portal apenas altera a colocação física do nó DOM. De todas as outras maneiras, o JSX que você renderiza em um portal atua como um nó filho do componente React que o renderiza. Por exemplo, o filho pode acessar o contexto fornecido pela árvore pai, e os eventos se propagam de filhos para pais de acordo com a árvore React.

#### Parameters {/*parameters*/}
#### Parâmetros {/*parameters*/}

* `children`: Anything that can be rendered with React, such as a piece of JSX (e.g. `<div />` or `<SomeComponent />`), a [Fragment](/reference/react/Fragment) (`<>...</>`), a string or a number, or an array of these.
* `children`: Qualquer coisa que pode ser renderizada com o React, como um pedaço de JSX (por exemplo, `<div />` ou `<SomeComponent />`), um [Fragmento](/reference/react/Fragment) (`<>...</>`), uma string ou um número, ou um array desses.

* `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated.
* `domNode`: Algum nó DOM, como aqueles retornados por `document.getElementById()`. O nó deve já existir. Passar um nó DOM diferente durante uma atualização fará com que o conteúdo do portal seja recriado.

* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists/#keeping-list-items-in-order-with-key)
* **opcional** `key`: Uma string ou número único a ser usado como a [chave](/learn/rendering-lists/#keeping-list-items-in-order-with-key) do portal.

#### Returns {/*returns*/}
#### Retornos {/*returns*/}

`createPortal` returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children` inside the provided `domNode`.
`createPortal` retorna um nó React que pode ser incluído no JSX ou retornado de um componente React. Se o React encontrá-lo na saída do render, colocará os `children` fornecidos dentro do `domNode` fornecido.

#### Caveats {/*caveats*/}
#### Ressalvas {/*caveats*/}

* Events from portals propagate according to the React tree rather than the DOM tree. For example, if you click inside a portal, and the portal is wrapped in `<div onClick>`, that `onClick` handler will fire. If this causes issues, either stop the event propagation from inside the portal, or move the portal itself up in the React tree.
* Eventos de portais se propagam de acordo com a árvore React e não com a árvore DOM. Por exemplo, se você clicar dentro de um portal, e o portal estiver envolvido em `<div onClick>`, o manipulador `onClick` será disparado. Se isso causar problemas, pare a propagação do evento de dentro do portal, ou mova o portal para cima na árvore React.

---

## Usage {/*usage*/}
## Uso {/*usage*/}

### Rendering to a different part of the DOM {/*rendering-to-a-different-part-of-the-dom*/}
### Renderizando em uma parte diferente do DOM {/*rendering-to-a-different-part-of-the-dom*/}

*Portals* let your components render some of their children into a different place in the DOM. This lets a part of your component "escape" from whatever containers it may be in. For example, a component can display a modal dialog or a tooltip that appears above and outside of the rest of the page.
*Portais* permitem que seus componentes renderizem alguns de seus filhos em um lugar diferente no DOM. Isso permite que uma parte do seu componente "escape" de quaisquer contêineres em que possa estar. Por exemplo, um componente pode exibir um diálogo modal ou um tooltip que aparece acima e fora do resto da página.

To create a portal, render the result of `createPortal` with <CodeStep step={1}>some JSX</CodeStep> and the <CodeStep step={2}>DOM node where it should go</CodeStep>:
Para criar um portal, renderize o resultado de `createPortal` com <CodeStep step={1}>algum JSX</CodeStep> e o <CodeStep step={2}>nó DOM onde ele deve ir</CodeStep>:

```js [[1, 8, "<p>This child is placed in the document body.</p>"], [2, 9, "document.body"]]
```js [[1, 8, "<p>Este filho é colocado no corpo do documento.</p>"], [2, 9, "document.body"]]
import { createPortal } from 'react-dom';

function MyComponent() {
return (
<div style={{ border: '2px solid black' }}>
<p>This child is placed in the parent div.</p>
<p>Este filho é colocado na div pai.</p>
{createPortal(
<p>This child is placed in the document body.</p>,
<p>Este filho é colocado no corpo do documento.</p>,
document.body
)}
</div>
);
}
```

React will put the DOM nodes for <CodeStep step={1}>the JSX you passed</CodeStep> inside of the <CodeStep step={2}>DOM node you provided</CodeStep>.
O React colocará os nós DOM do <CodeStep step={1}>JSX que você passou</CodeStep> dentro do <CodeStep step={2}>nó DOM que você forneceu</CodeStep>.

Without a portal, the second `<p>` would be placed inside the parent `<div>`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
Sem um portal, o segundo `<p>` seria colocado dentro da `<div>` pai, mas o portal "teletransportou" ele para o [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)

<Sandpack>

Expand All @@ -98,9 +97,9 @@ import { createPortal } from 'react-dom';
export default function MyComponent() {
return (
<div style={{ border: '2px solid black' }}>
<p>This child is placed in the parent div.</p>
<p>Este filho é colocado na div pai.</p>
{createPortal(
<p>This child is placed in the document body.</p>,
<p>Este filho é colocado no corpo do documento.</p>,
document.body
)}
</div>
Expand All @@ -110,30 +109,30 @@ export default function MyComponent() {

</Sandpack>

Notice how the second paragraph visually appears outside the parent `<div>` with the border. If you inspect the DOM structure with developer tools, you'll see that the second `<p>` got placed directly into the `<body>`:
Note como o segundo parágrafo aparece visualmente fora da `<div>` pai com a borda. Se você inspecionar a estrutura do DOM com ferramentas de desenvolvedor, verá que o segundo `<p>` foi colocado diretamente no `<body>`:

```html {4-6,9}
<body>
<div id="root">
...
<div style="border: 2px solid black">
<p>This child is placed inside the parent div.</p>
<p>Este filho é colocado dentro da div pai.</p>
</div>
...
</div>
<p>This child is placed in the document body.</p>
<p>Este filho é colocado no corpo do documento.</p>
</body>
```

A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events still bubble up from children to parents according to the React tree.
Um portal apenas altera a colocação física do nó DOM. De todas as outras maneiras, o JSX que você renderiza em um portal atua como um nó filho do componente React que o renderiza. Por exemplo, o filho pode acessar o contexto fornecido pela árvore pai, e os eventos ainda se propagam de filhos para pais de acordo com a árvore React.

---

### Rendering a modal dialog with a portal {/*rendering-a-modal-dialog-with-a-portal*/}
### Renderizando um diálogo modal com um portal {/*rendering-a-modal-dialog-with-a-portal*/}

You can use a portal to create a modal dialog that floats above the rest of the page, even if the component that summons the dialog is inside a container with `overflow: hidden` or other styles that interfere with the dialog.
Você pode usar um portal para criar um diálogo modal que flutua acima do resto da página, mesmo que o componente que invoca o diálogo esteja dentro de um contêiner com `overflow: hidden` ou outros estilos que interferem com o diálogo.

In this example, the two containers have styles that disrupt the modal dialog, but the one rendered into a portal is unaffected because, in the DOM, the modal is not contained within the parent JSX elements.
Neste exemplo, os dois contêineres têm estilos que interrompem o diálogo modal, mas o que é renderizado em um portal não é afetado porque, no DOM, o modal não está contido dentro dos elementos JSX pai.

<Sandpack>

Expand Down Expand Up @@ -164,7 +163,7 @@ export default function NoPortalExample() {
return (
<>
<button onClick={() => setShowModal(true)}>
Show modal without a portal
Mostrar modal sem um portal
</button>
{showModal && (
<ModalContent onClose={() => setShowModal(false)} />
Expand All @@ -184,7 +183,7 @@ export default function PortalExample() {
return (
<>
<button onClick={() => setShowModal(true)}>
Show modal using a portal
Mostrar modal usando um portal
</button>
{showModal && createPortal(
<ModalContent onClose={() => setShowModal(false)} />,
Expand All @@ -199,8 +198,8 @@ export default function PortalExample() {
export default function ModalContent({ onClose }) {
return (
<div className="modal">
<div>I'm a modal dialog</div>
<button onClick={onClose}>Close</button>
<div>Eu sou um diálogo modal</div>
<button onClick={onClose}>Fechar</button>
</div>
);
}
Expand All @@ -226,7 +225,7 @@ export default function ModalContent({ onClose }) {
background-color: white;
border: 2px solid rgb(240, 240, 240);
border-radius: 12px;
position: absolute;
position: absolute;
width: 250px;
top: 70px;
left: calc(50% - 125px);
Expand All @@ -238,29 +237,29 @@ export default function ModalContent({ onClose }) {

<Pitfall>

It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way.
É importante garantir que seu aplicativo seja acessível ao usar portais. Por exemplo, você pode precisar gerenciar o foco do teclado para que o usuário possa mover o foco dentro e fora do portal de uma maneira natural.

Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
Siga as [Práticas de Autoria de Modal WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) ao criar modais. Se você usar um pacote da comunidade, garanta que ele seja acessível e siga essas diretrizes.

</Pitfall>

---

### Rendering React components into non-React server markup {/*rendering-react-components-into-non-react-server-markup*/}
### Renderizando componentes React em marcação de servidor não-React {/*rendering-react-components-into-non-react-server-markup*/}

Portals can be useful if your React root is only part of a static or server-rendered page that isn't built with React. For example, if your page is built with a server framework like Rails, you can create areas of interactivity within static areas such as sidebars. Compared with having [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals let you treat the app as a single React tree with shared state even though its parts render to different parts of the DOM.
Os portais podem ser úteis se sua raiz React for apenas parte de uma página estática ou renderizada no servidor que não é construída com o React. Por exemplo, se sua página for construída com um framework de servidor como Rails, você pode criar áreas de interatividade dentro de áreas estáticas, como barras laterais. Comparado a ter [várias raízes React separadas](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react), os portais permitem que você trate o aplicativo como uma única árvore React com estado compartilhado, mesmo que suas partes sejam renderizadas em diferentes partes do DOM.

<Sandpack>

```html index.html
<!DOCTYPE html>
<html>
<head><title>My app</title></head>
<head><title>Meu app</title></head>
<body>
<h1>Welcome to my hybrid app</h1>
<h1>Bem-vindo ao meu aplicativo híbrido</h1>
<div class="parent">
<div class="sidebar">
This is server non-React markup
Esta é uma marcação de servidor não-React
<div id="sidebar-content"></div>
</div>
<div id="root"></div>
Expand Down Expand Up @@ -301,11 +300,11 @@ export default function App() {
}

function MainContent() {
return <p>This part is rendered by React</p>;
return <p>Esta parte é renderizada pelo React</p>;
}

function SidebarContent() {
return <p>This part is also rendered by React!</p>;
return <p>Esta parte também é renderizada pelo React!</p>;
}
```

Expand Down Expand Up @@ -342,15 +341,15 @@ p {

---

### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/}
### Renderizando componentes React em nós DOM não-React {/*rendering-react-components-into-non-react-dom-nodes*/}

You can also use a portal to manage the content of a DOM node that's managed outside of React. For example, suppose you're integrating with a non-React map widget and you want to render React content inside a popup. To do this, declare a `popupContainer` state variable to store the DOM node you're going to render into:
Você também pode usar um portal para gerenciar o conteúdo de um nó DOM que é gerenciado fora do React. Por exemplo, suponha que você esteja integrando com um widget de mapa não-React e deseja renderizar conteúdo React dentro de um popup. Para fazer isso, declare uma variável de estado `popupContainer` para armazenar o nó DOM no qual você vai renderizar:

```js
const [popupContainer, setPopupContainer] = useState(null);
```

When you create the third-party widget, store the DOM node returned by the widget so you can render into it:
Quando você criar o widget de terceiros, armazene o nó DOM retornado pelo widget para que você possa renderizar nele:

```js {5-6}
useEffect(() => {
Expand All @@ -363,20 +362,20 @@ useEffect(() => {
}, []);
```

This lets you use `createPortal` to render React content into `popupContainer` once it becomes available:
Isso permite que você use `createPortal` para renderizar conteúdo React dentro de `popupContainer` uma vez que ele se torne disponível:

```js {3-6}
return (
<div style={{ width: 250, height: 250 }} ref={containerRef}>
{popupContainer !== null && createPortal(
<p>Hello from React!</p>,
<p>Olá do React!</p>,
popupContainer
)}
</div>
);
```

Here is a complete example you can play with:
Aqui está um exemplo completo que você pode experimentar:

<Sandpack>

Expand Down Expand Up @@ -420,7 +419,7 @@ export default function Map() {
return (
<div style={{ width: 250, height: 250 }} ref={containerRef}>
{popupContainer !== null && createPortal(
<p>Hello from React!</p>,
<p>Olá do React!</p>,
popupContainer
)}
</div>
Expand Down Expand Up @@ -456,4 +455,4 @@ export function addPopupToMapWidget(map) {
button { margin: 5px; }
```

</Sandpack>
</Sandpack>
Loading