M

MLOG

Português

Um guia completo sobre os Portais do React, cobrindo seus casos de uso, implementação, benefícios e melhores práticas para renderizar conteúdo fora da hierarquia padrão de componentes.

Portais em React: Renderizando Conteúdo Fora da Árvore de Componentes

Os portais do React fornecem um mecanismo poderoso para renderizar componentes filhos num nó do DOM que existe fora da hierarquia do DOM do componente pai. Esta técnica é inestimável em vários cenários, como modais, tooltips e situações onde necessita de controlo preciso sobre o posicionamento e a ordem de empilhamento dos elementos na página.

O que são os Portais do React?

Numa aplicação React típica, os componentes são renderizados dentro de uma estrutura hierárquica estrita. O componente pai contém componentes filhos, e assim por diante. No entanto, por vezes é necessário libertar-se desta estrutura. É aqui que os portais do React entram. Um portal permite-lhe renderizar o conteúdo de um componente numa parte diferente do DOM, mesmo que essa parte não seja um descendente direto do componente na árvore do React.

Imagine que tem um componente modal que precisa de ser exibido no nível superior da sua aplicação, independentemente de onde é renderizado na árvore de componentes. Sem portais, poderia tentar alcançar isto usando posicionamento absoluto e z-index, o que pode levar a problemas de estilização complexos e potenciais conflitos. Com portais, pode renderizar diretamente o conteúdo do modal num nó específico do DOM, como um elemento "modal-root" dedicado, garantindo que seja sempre renderizado no nível correto.

Por que Usar os Portais do React?

Os Portais do React abordam vários desafios comuns no desenvolvimento web:

Como Implementar os Portais do React

Usar os Portais do React é simples. Aqui está um guia passo a passo:

  1. Crie um Nó do DOM: Primeiro, crie um nó do DOM onde pretende renderizar o conteúdo do portal. Isto é tipicamente feito no seu ficheiro `index.html`. Por exemplo: 
    <div id="modal-root"></div>
  2. Use `ReactDOM.createPortal()`: No seu componente React, use o método `ReactDOM.createPortal()` para renderizar o conteúdo no nó do DOM criado. Este método recebe dois argumentos: o nó do React (o conteúdo que pretende renderizar) e o nó do DOM onde o pretende renderizar. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>Este conteúdo é renderizado no modal-root!</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. Renderize o Componente: Renderize o componente que contém o portal como faria com qualquer outro componente React. 
    function App() {
  return (
    <div>
      <h1>Minha Aplicação</h1>
      <MyComponent />
    </div>
  );
}

export default App;

Neste exemplo, o conteúdo dentro do `MyComponent` será renderizado dentro do elemento `modal-root`, embora o `MyComponent` seja renderizado dentro do componente `App`.

Exemplo: Criando um Componente Modal com Portais do React

Vamos criar um componente modal completo usando os Portais do React. Este exemplo inclui estilização básica e funcionalidade para abrir e fechar o modal.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-content">
          {children}
        </div>
        <button onClick={handleClose}>Fechar</button>
      </div>
    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>Minha Aplicação</h1>
      <button onClick={handleOpenModal}>Abrir Modal</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Conteúdo do Modal</h2>
          <p>Este é o conteúdo do modal.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

Neste exemplo:

Também precisaria de adicionar alguma estilização CSS às classes `modal-overlay` e `modal` para posicionar o modal corretamente no ecrã. Por exemplo:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

Lidando com Eventos em Portais

Uma consideração importante ao usar portais é como os eventos são tratados. A propagação de eventos (event bubbling) funciona de forma diferente com portais do que com componentes React padrão.

Quando um evento ocorre dentro de um portal, ele propagar-se-á pela árvore do DOM como de costume. No entanto, o sistema de eventos do React trata o portal como um nó regular do React, o que significa que os eventos também se propagarão pela árvore de componentes do React que contém o portal.

Isto pode, por vezes, levar a um comportamento inesperado se não tiver cuidado. Por exemplo, se tiver um manipulador de eventos num componente pai que só deveria ser acionado por eventos dentro desse componente, ele também poderá ser acionado por eventos dentro do portal.

Para evitar estes problemas, pode usar o método `stopPropagation()` no objeto do evento para impedir que o evento se propague mais. Alternativamente, pode usar os eventos sintéticos do React e a renderização condicional para controlar quando os manipuladores de eventos são acionados.

Aqui está um exemplo de como usar `stopPropagation()` para impedir que um evento se propague para o componente pai:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('Clicado dentro do portal!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Este conteúdo é renderizado no portal.</div>,
    document.getElementById('portal-root')
  );
}

Neste exemplo, clicar no conteúdo dentro do portal acionará a função `handleClick`, mas o evento não se propagará para nenhum componente pai.

Melhores Práticas para Usar os Portais do React

Aqui estão algumas melhores práticas a ter em mente ao trabalhar com os Portais do React:

Alternativas aos Portais do React

Embora os Portais do React sejam uma ferramenta poderosa, existem abordagens alternativas que pode usar para alcançar resultados semelhantes. Algumas alternativas comuns incluem:

A escolha de qual abordagem usar depende dos requisitos específicos da sua aplicação e da complexidade dos elementos de UI que está a tentar criar. Os portais são geralmente a melhor opção quando necessita de controlo preciso sobre o posicionamento e a ordem de empilhamento dos elementos e quer evitar conflitos de CSS.

Considerações Globais

Ao desenvolver aplicações para uma audiência global, é essencial considerar fatores como localização, acessibilidade e diferenças culturais. Os Portais do React podem desempenhar um papel na abordagem destas considerações:

Ao ter em conta estas considerações globais, pode criar aplicações mais inclusivas e fáceis de usar para uma audiência diversificada.

Conclusão

Os Portais do React são uma ferramenta poderosa e versátil para renderizar conteúdo fora da árvore de componentes padrão. Eles fornecem uma solução limpa e elegante para padrões de UI comuns como modais, tooltips e popovers. Ao entender como os portais funcionam e seguir as melhores práticas, pode criar aplicações React mais flexíveis, fáceis de manter e acessíveis.

Experimente os portais nos seus próprios projetos e descubra as muitas maneiras como eles podem simplificar o seu fluxo de trabalho de desenvolvimento de UI. Lembre-se de considerar o tratamento de eventos, a acessibilidade e as considerações globais ao usar portais em aplicações de produção.

Ao dominar os Portais do React, pode levar as suas habilidades em React para o próximo nível e construir aplicações web mais sofisticadas e fáceis de usar para uma audiência global.