Os componentes do React incentivam boas práticas, mas podem ser muito restritivos. Aprenda como quebrar o molde.

Principais conclusões

  • Os portais React permitem renderizar o conteúdo de um componente fora de sua hierarquia de componentes pai, tornando-o útil para elementos de UI como modais e sobreposições.
  • Os portais podem ser usados ​​em vários cenários, como modais, integrações de terceiros, menus de contexto e dicas de ferramentas, permitindo renderização flexível em diferentes locais do DOM.
  • Ao usar React Portals, você pode separar as preocupações da UI da árvore de componentes principal, aprimorar a capacidade de manutenção do código e controlar facilmente o índice z dos componentes para colocar em camadas e empilhar elementos da UI.

Os aplicativos da web modernos precisam de interfaces que apresentem elementos como modais e dicas de ferramentas. Mas esses componentes de UI nem sempre podem se integrar bem à estrutura de componentes existente.

O React oferece uma solução para esse problema por meio de um recurso chamado Portais.

instagram viewer

O que são portais React?

Os portais React fornecem uma maneira de renderizar o conteúdo de um componente fora de sua hierarquia de componentes pai. Em outras palavras, eles permitem renderizar a saída de um componente em um elemento DOM diferente que não é filho do componente atual.

Este recurso é útil ao lidar com componentes de UI que precisam ser renderizados em um nível superior no DOM, como modais ou sobreposições.

Usos para portais React

Os portais React são úteis em vários cenários:

  • Modais e sobreposições. Quando você precisar exibir diálogos modais ou sobreposições, renderize-os no nível superior do DOM. Isso garante que os estilos ou layout dos pais não os limitem.
  • Integrações de terceiros. Ao integrar bibliotecas de terceiros que antecipam a renderização em locais específicos do DOM.
  • Menus de contexto. Criação de menus de contexto que respondem às interações do usuário, que você precisa posicionar em relação à janela de visualização ou a um elemento DOM específico.
  • Dicas de ferramentas e popovers. Ao renderizar dicas de ferramentas ou popovers que devem aparecer sobre outros componentes, independentemente de sua posição na árvore de componentes.

Como funcionam os portais React

Tradicionalmente, ao renderizar um componente no React, você anexa sua saída ao nó DOM do componente pai. Isso funciona bem para a maioria dos cenários, mas torna-se limitante quando você precisa renderizar conteúdo fora da hierarquia pai.

Suponha que você esteja criando um diálogo modal. Por padrão, você colocará o conteúdo do modal dentro do nó DOM do componente pai.

Isto pode levar a conflitos de estilo e outros comportamentos não intencionais, uma vez que o conteúdo do modal herda os estilos e restrições de seus componentes pai.

Os portais React resolvem essa limitação permitindo que você especifique um elemento DOM de destino onde a saída de um componente deve ser renderizada.

Isso significa que você pode renderizar qualquer elemento da UI fora da hierarquia DOM do pai, libertando-se das restrições dos estilos e layout do pai.

Como usar portais React

Os modais são um exemplo perfeito de quando você pode usar React Portals. Este código de exemplo explica o procedimento.

Configure um aplicativo React básico

Antes de criar um portal, certifique-se de ter um aplicativo React básico configurado. Você pode usar ferramentas como Criar aplicativo React para estruturar rapidamente um projeto.

Crie um Portal para Modais

Para criar um portal, use o ReactDOM.createPortal() função. São necessários dois argumentos: o conteúdo que você deseja renderizar e uma referência ao nó DOM para renderizá-lo.

Neste exemplo, o componente Modal renderiza seus filhos usando um portal. O conteúdo aparecerá no elemento DOM com o ID ‘root’.

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Você pode definir o conteúdo de um Modal específico em um componente específico. Por exemplo, este componente ModalContent contém um parágrafo e um Fechar botão:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>




exportdefault ModalContent;

Você pode então abrir o Modal através de um clique de botão definido em App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);


const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };


return (






exportdefault App;

Neste exemplo, o componente Modal renderiza seu conteúdo por meio de um portal, desvinculado da hierarquia do componente principal.

Exemplos do mundo real

Os portais React são úteis em diversas situações do dia a dia.

  • Sistema de notificação: quando criando um sistema de notificação, muitas vezes você deseja mensagens na parte superior da tela, não importa onde esteja o componente atual.
  • Menu de contexto: os menus de contexto devem aparecer perto de onde o usuário clica, independentemente de onde esteja na hierarquia do DOM.
  • Integração de terceiros: bibliotecas de terceiros geralmente precisam ter como alvo partes arbitrárias do DOM.

Melhores práticas para uso do portal

Para aproveitar ao máximo os portais React, siga estas dicas:

  • Selecione os casos certos: Os portais são flexíveis, mas nem tudo precisa deles. Use portais quando a renderização regular causar problemas ou conflitos.
  • Mantenha o conteúdo do portal separado: Ao renderizar conteúdo por meio de portais, certifique-se de que ele seja independente. Não deve depender de estilos ou contexto pai.
  • Gerencie eventos e ações: Com portais, os eventos funcionam de maneira um pouco diferente devido ao conteúdo separado. Lidar com a propagação e ações de eventos adequadamente.

Benefícios dos portais React

Os portais React oferecem vários benefícios que podem aprimorar o desenvolvimento de interfaces de usuário complexas. Eles:

  • Ajude a separar as preocupações da UI da árvore de componentes principal, melhorando a manutenção e a legibilidade do código.
  • Fornece flexibilidade para componentes que precisam ser exibidos fora de seu componente pai.
  • Facilite a criação de modais e sobreposições separados do restante da IU.
  • Permite controlar facilmente o índice z dos componentes, garantindo que você possa colocar e empilhar ordenadamente os elementos da interface do usuário.

Potenciais armadilhas e considerações

Embora os portais React sejam úteis, tenha o seguinte em mente:

  • Problemas de CSS: os portais podem causar comportamento inesperado no estilo CSS, pois colocam o conteúdo fora dos componentes pai. Use estilos globais ou gerencie o escopo CSS com cuidado.
  • Acessibilidade: ao usar portais para renderizar conteúdo, lembre-se de manter intactos os recursos de acessibilidade, como navegação por teclado e compatibilidade com leitor de tela.
  • Renderização no lado do servidor: os portais podem não combinar bem com renderização do lado do servidor (SSR). Compreenda os efeitos e as limitações do uso de portais em configurações de SSR.

Impulsionando a UI além da norma

Os portais React oferecem uma solução sólida para lidar com situações de UI complexas que precisam que o conteúdo apareça além dos limites dos componentes pais.

Ao compreender os portais e usar as melhores práticas, você pode criar interfaces de usuário mais adaptáveis ​​e fáceis de manter, evitando problemas.

Esteja você criando modais ou trazendo bibliotecas de terceiros, os React Portals fornecem uma resposta poderosa para atender às necessidades exigentes de UI.