0Pricing
React Academy · Aula

O que são os Portals do React

Entenda a API createPortal e por que é útil renderizar fora da div raiz.

O que são os Portals do React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você aprenderá o que são os Portais do React, por que é útil renderizar fora da árvore DOM pai e como usar a API createPortal.

A hierarquia normal do DOM do React

Por padrão, cada componente é renderizado dentro do nó DOM do componente pai. O aplicativo React inteiro geralmente fica dentro de uma única `
`. Isso funciona bem até você precisar que um modal, uma dica de ferramenta ou um menu suspenso escape de um pai com `overflow: hidden`.

O que é um portal

Um **portal** permite renderizar a saída de um componente em um nó DOM diferente — um nó que existe fora da raiz do React. A árvore React do componente não é alterada; somente a posição no DOM muda.
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Por que os portais existem

Propriedades CSS como `overflow: hidden`, contextos de empilhamento de `z-index` e `transform` em um pai podem recortar ou ocultar elementos filhos. Os portais escapam dessas restrições ao anexar a saída renderizada a um nó DOM diferente.

A propagação de eventos ainda funciona

Mesmo que o nó DOM do portal esteja fora do pai, **os eventos do React continuam se propagando** pela árvore de componentes do React — não pela árvore DOM. Um clique dentro de um modal de portal será propagado até o pai dele no React.

Criando um destino para o portal

Você pode criar um portal em qualquer nó DOM existente. Um padrão comum é adicionar uma `
// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

O ciclo de vida do portal está vinculado ao pai no React

Um portal é montado quando o componente pai é montado e desmontado quando o pai é desmontado. O React ainda o acompanha como parte da mesma árvore de componentes, portanto o contexto e as referências funcionam normalmente.

O contexto funciona através dos portais

Como os portais continuam fazendo parte da árvore de componentes do React, os valores de contexto fornecidos acima do portal continuam acessíveis dentro dele. A posição no DOM não afeta a cadeia de contexto do React.

Usando createPortal com estado

Controle a visibilidade do portal com uma variável de estado. Alterne-a com um botão, e o conteúdo do portal aparecerá em document.body, enquanto o botão permanecerá na posição normal do DOM.
function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Renderização no servidor e portais

Os portais exigem que um nó DOM exista, portanto são sempre executados no lado do cliente. Em Next.js ou em outras configurações de SSR, certifique-se de que o código de renderização do portal seja executado somente no navegador, usando `useEffect` ou uma verificação de estado montado.

Verificação rápida

Os Portais do React renderizam conteúdo em um nó DOM diferente. Que aspecto da árvore de componentes do React é afetado por isso?

Recapitulação

Os portais permitem renderizar a saída do React em qualquer nó DOM usando createPortal(). A árvore React, o contexto e a propagação de eventos não são afetados. Use-os para escapar das restrições de overflow e z-index em modais e dicas de ferramenta.

A seguir

Próxima lição: **Criando um componente modal com portais** — você criará um modal totalmente reutilizável que será renderizado em document.body por meio de um portal, com gerenciamento do estado de abertura e fechamento.

Perguntas Frequentes

A aula “O que são os Portals do React” é grátis?

Sim — o texto completo de “O que são os Portals do React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “O que são os Portals do React”?

Entenda a API createPortal e por que é útil renderizar fora da div raiz. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “O que são os Portals do React”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O que são os Portals do React
  2. Criação de um componente modal com Portals
  3. Tratamento de foco e armadilhas de teclado em modais
  4. Dicas de ferramentas e menus suspensos com Portals
← Voltar para React Academy