Quando criamos componentes no React, normalmente eles existem dentro da árvore de componentes. Isso é bom, mas às vezes queremos que certas partes de um componente apareçam ou em algum lugar totalmente diferente. fora da árvore de componentes Este é um requisito comum quando criamos janelas popup modais, que precisam estar acima de todos os outros componentes. Podemos criá-los dentro de um componente, mas, em última análise, os desejaremos acima de tudo, e tê-los aninhados em muitos componentes pode causar problemas, pois seu ficará abaixo de tudo o que estiver dentro: z-index Para resolver esse problema, podemos o modal de seu próprio componente para outra parte de nosso modelo usando . teletransportar createPortal Isso nos permite colocar nosso componente em qualquer lugar que desejarmos, como a base da árvore HTML, dentro da tag ou dentro de outro elemento. body Mesmo que o elemento exista dentro da árvore de componentes, nos dá o poder de colocá-lo onde quisermos. createPortal Usando React Portals Para mostrar como os portais funcionam, considere que temos o seguinte código React básico dentro do nosso arquivo Aqui, queremos que o modal apareça acima de tudo. Assim, criamos um chamado . Em última análise, é aqui que queremos que todos os nossos modais entrem: App.js div #modal-container import logo from './logo.svg'; import './App.css'; import { useState } from 'react' import Modal from './components/Modal.js'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> </div> ); } export default App; Dentro , importei um componente chamado . Este é o nosso componente Modal, que aparecerá sempre que o usuário clicar no botão. App.js Modal Sempre que for definido como true usando , o modal deve aparecer. Caso contrário, desaparecerá. isModalOpen setIsModalOpen() Também tenho um pouco de CSS para garantir que nossos modais apareçam acima de tudo: #modal-container { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; height: 100%; pointer-events: none; } .modal { position: absolute; top: 200px; background: white; border-radius: 4px; left: calc(50% - 100px); width: 200px; } Criando Nosso {ortal Criar um portal é muito fácil - há uma função, . Em vez de retornar algum DOM no React, retornamos o . createPortal() Portal aceita dois argumentos - o elemento DOM que queremos retornar - neste caso, o modal - e o elemento DOM para o qual queremos teletransportar nosso elemento DOM. createPortal() Portanto, nosso segundo argumento é , pois queremos colocar todos os nossos modais em : document.getElementById('modal-container') #modal-container import { createPortal } from 'react-dom'; function Modal({modalState, onClickEvent}) { if(!modalState) return null; return ( createPortal( <div className="modal"> <button onClick={onClickEvent}>Close Modal</button> <div className="modal-content">Modal Content goes here</div> </div>, document.getElementById('modal-container') ) ); }; export default Modal; Embora tenhamos teletransportado nosso elemento DOM para , ele ainda se comporta como um filho React normal. Como o Portal ainda existe na árvore do React, recursos como o contexto em que o elemento está ainda funcionam da mesma forma. modal-container Também deve ser observado que, embora tenhamos e no mesmo arquivo, o local para o qual você teletransporta seu elemento DOM pode estar em no seu código React. modal-container Modal qualquer lugar Assim, você pode teletransportá-lo para um subcomponente, elemento ou pai completamente diferente em qualquer lugar do DOM. É muito poderoso e útil - então use-o com sabedoria. Vamos olhar novamente para nosso HTML : App.js <!-- .... --> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> Agora, mesmo que o esteja em nosso cabeçalho, ele aparecerá no sempre que abrirmos o modal usando o botão: Modal #modal-container Conclusão Os portais são uma ferramenta bastante poderosa no React. Eles são uma maneira útil de resolver o problema principal com sistemas baseados em componentes - transportar certos elementos acima de todo o resto. Sendo assim, espero que você tenha gostado deste guia para portais React. Se você está aprendendo React, sugiro dominar o Javascript primeiro - o que você pode fazer com o meu completo. Javascript Handbook Tenha um ótimo dia.
