Construindo Portais no React: Exemplos de Código e Utilização

#react #javascript #reactnative #typescript

Introdução:

Os portais são recursos poderosos oferecidos pelo React que permitem renderizar componentes em um nó DOM fora da hierarquia do componente pai. Isso significa que podemos renderizar elementos em qualquer lugar da página, mesmo que estejam fora do escopo dos componentes pais.

Neste artigo, exploraremos como utilizar portais no React, fornecendo exemplos de código práticos para criar portais personalizados em suas aplicações.

O que são Portais no React?

Os portais no React são uma maneira de renderizar um componente filho em uma parte diferente da árvore de elementos DOM, que está fora da hierarquia do componente pai. Isso permite que os componentes sejam renderizados em qualquer elemento DOM, como um elemento raiz separado ou mesmo dentro de um modal.

Por que usar Portais?

Existem várias situações em que os portais podem ser úteis:

Renderização de modais: Os modais são componentes comuns em interfaces de usuário, e os portais permitem renderizá-los diretamente no elemento raiz do documento, garantindo que eles fiquem acima de outros elementos.
Renderização de componentes em camadas superiores: Às vezes, é necessário renderizar um componente em uma camada superior, como uma barra de notificações ou um menu suspenso. Com os portais, podemos renderizar esses componentes em qualquer lugar da página.
Isolamento de estilos: Ao renderizar um componente dentro de um portal, podemos garantir que ele fique isolado do restante da aplicação em termos de estilos, evitando conflitos de CSS.

Exemplos de Código:
Vamos ver alguns exemplos práticos de como usar portais no React.

Exemplo 1: Renderizando um Modal com Portal

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
};

const App = () => {
  return (
    <div>
      <h1>Meu Aplicativo</h1>
      <Modal>
        <p>Conteúdo do Modal</p>
      </Modal>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Neste exemplo, criamos um componente Modal que utiliza ReactDOM.createPortal para renderizar o conteúdo dentro de um elemento com o id "modal-root", que pode ser um elemento separado no HTML. Dessa forma, o Modal é renderizado em uma camada superior acima dos outros componentes.

Exemplo 2: Renderizando um Componente em uma Camada Superior

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

const Overlay = () => {
  return ReactDOM.createPortal(
    <div className="overlay">
      <p>Componente Renderizado em uma Camada Superior</p>
    </div>,
    document.getElementById('overlay-root')
  );
};

const App = () => {
  const [showOverlay, setShowOverlay] = useState(false);

  const toggleOverlay = () => {
    setShowOverlay(!showOverlay);
  };

  return (
    <div>
      <h1>Meu Aplicativo</h1>
      <button onClick={toggleOverlay}>Mostrar Overlay</button>
      {showOverlay && <Overlay />}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Neste exemplo, temos um botão que controla a exibição do componente Overlay. Utilizando ReactDOM.createPortal, o Overlay é renderizado dentro de um elemento com o id "overlay-root", que pode estar em qualquer lugar da página, permitindo que o componente seja exibido em uma camada superior ao pressionar o botão.

Conclusão:

Os portais são recursos valiosos no React que permitem renderizar componentes fora da hierarquia de seus componentes pais. Eles são especialmente úteis ao criar modais, camadas superiores e garantir o isolamento de estilos.

Com os exemplos de código fornecidos neste artigo, você pode começar a utilizar portais em suas aplicações React e aproveitar seus benefícios na construção de interfaces mais flexíveis e dinâmicas.

Lembre-se de consultar a documentação oficial do React para obter mais informações sobre portais e explorar outras possibilidades que essa funcionalidade oferece.