Uma das funcionalidades mais bacanas que vieram com a versão 16 do React são os portais. Para quem ainda não conhece a funcionalidade, os portais nada mais são que uma nova maneira de renderizar um componente React em um nó da DOM que está fora da hierarquia do componente pai. Estranho? O conceito, sim, mas a aplicação prática não é.
Geralmente quando estamos usando React, criamos uma div vazia com um id dentro do nosso HTML. Algo assim:
<div id=”root”></div>
Em nosso JavaScript, usamos o ReactDOM para dizer ao React qual componente deve ser renderizado em qual nó da DOM real. Para isso, usamos o método render. Imaginando que nosso componente pai se chama App, o código ficaria assim:
ReactDOM.render(document.querySelector(“#root”),<App />)
Familiar, certo? Com os portais, podemos fazer com que componentes que estejam dentro do componente <App /> sejam renderizados em outro nó da DOM. Se eu tivesse, por exemplo, uma outra div com um id sendo “outro-lugar” e um componente chamado Mensagem, por exemplo, poderia usar o método createPortal — também do ReactDOM — para renderiza-lo lá. Este método é muito semelhante ao nosso já conhecido render, sendo que aceita dois parâmetros: o componente React e o nó na DOM.
O código seria semelhante a este:
<!-- no seu arquivo HTML--> <div id=”root”></div> <div id=”outra-div”></div> // no seu JavaScript ReactDOM.render(document.querySelector(“#root”),<App />) ReactDOM.createPortal(document.querySelector(“#outra-div”),<Mensagem />)
Bem bacana, né? Você pode ver o resultado deste código aqui neste pen. Abra-o e use as ferramentas de desenvolvimento do seu navegador para inspecionar o elemento da mensagem. Como já era de se esperar, ele não foi inserido na div de id “root”, container do componente pai App, mas sim, na div de id “outra-div”, como especificamos no método createPortal.
Essa feature pode ser útil para muitas coisas. A primeira utilidade que vem a cabeça — e que é utilizada na documentação oficial como exemplo — é para a criação de modais. Até a versão 15 do React, usar modais era uma tarefa – no mínimo – bem chata. Com esta nova funcionalidade, isso se tornou mais simples, como mostra o vídeo abaixo:
Conclusão
Esta é apenas uma das novas funcionalidades do React 16 que tornam a nossa vida mais fácil. Caso você queria saber mais sobre as melhorias do React, assista ao meu curso gratuito sobre o tema no Youtube (ou no Udemy). Nas referências, também segue o link da documentação oficial e de outro texto que explica com mais detalhes o que foi feito no vídeo.
Referências
De 0 a 10, o quanto você recomendaria este artigo para um amigo?