Cuando creamos componentes en React, normalmente existen dentro del árbol de componentes. En general, esto está bien, pero a veces queremos que ciertas partes de un componente aparezcan , o en algún lugar completamente diferente. fuera del árbol de componentes Este es un requisito común cuando creamos ventanas emergentes modales, que deben estar por encima de todos los demás componentes. Podemos crearlos dentro de un componente, pero finalmente los querremos por encima de todo lo demás, y tenerlos anidados dentro de muchos componentes puede causar problemas ya que su caerá por debajo de lo que sea que estén dentro: z-index Para resolver este problema, podemos el modal fuera de su propio componente y dentro de otra parte de nuestra plantilla usando . teletransportar createPortal Esto nos permite colocar nuestro componente en cualquier otro lugar que deseemos, como la base del árbol HTML, dentro de la etiqueta del o dentro de otro elemento. body Aunque el elemento existe dentro del árbol de componentes, nos da el poder de ponerlo donde queramos. createPortal Uso de portales de reacción Para mostrarle cómo funcionan los portales, tenga en cuenta que tenemos el siguiente código React básico dentro de nuestro archivo Aquí, queremos que el modal aparezca encima de todo lo demás. Como tal, hemos creado un llamado . En última instancia, aquí es donde queremos que entren todos nuestros modales: 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 de , he importado un componente llamado . Este es nuestro componente Modal, que aparecerá cada vez que el usuario haga clic en el botón. App.js Modal Cada vez que se establece en verdadero usando , debería aparecer el modal. De lo contrario, desaparecerá. isModalOpen setIsModalOpen() También tengo un poco de CSS para garantizar que nuestros modales aparezcan encima de todo lo demás: #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; } Creando nuestro {ortal Crear un portal es bastante fácil: hay una función, . En lugar de devolver algo de DOM en React, devolvemos el . createPortal() Portal acepta dos argumentos: el elemento DOM que queremos devolver, en este caso, el modal, y el elemento DOM al que queremos teletransportar nuestro elemento DOM. createPortal() Entonces, nuestro segundo argumento es , ya que queremos poner todos nuestros modales en : 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; Aunque teletransportamos nuestro elemento DOM a , todavía se comporta como un niño React normal. Dado que el Portal aún existe en el árbol de React, características como el contexto en el que se encuentra el elemento aún funcionan de la misma manera. modal-container También se debe tener en cuenta que aunque tenemos y en el mismo archivo, el lugar al que teletransporta su elemento DOM puede estar en de su código React. modal-container Modal cualquier parte Por lo tanto, podría teletransportarlo a un subcomponente, elemento o padre completamente diferente en cualquier lugar del DOM. Es bastante poderoso y útil, así que úsalo sabiamente. Miremos hacia atrás en nuestro HTML de : 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> Ahora, aunque se encuentra en nuestro encabezado, aparecerá en cada vez que abramos el modal usando el botón: Modal #modal-container Conclusión Los portales son una herramienta bastante poderosa en React. Son una forma útil de resolver el problema principal con los sistemas basados en componentes: transportar ciertos elementos por encima del resto. Como tal, espero que haya disfrutado de esta guía de portales de React. Si está aprendiendo React, le sugiero que primero domine Javascript, lo que puede hacer con mi completo. Manual de Javascript Qué tengas un lindo día.
