¿Qué son los portales en React y cómo usarlos?

Los portales en React son una característica poderosa que permite renderizar un componente de React en cualquier parte del DOM fuera de la jerarquía principal de componentes. Esto es especialmente útil cuando se necesita renderizar contenido en un lugar diferente al componente padre, lo que proporciona una mayor flexibilidad y control sobre la estructura de la interfaz de usuario.

¿Por qué necesitamos portales en React?

Antes de profundizar en cómo usar los portales en React, es importante comprender por qué son necesarios. En la jerarquía del DOM (Document Object Model) de una aplicación web construida con React, todos los componentes están anidados dentro de un árbol de React, con un componente principal en la cima. Esto es genial en la mayoría de los casos, ya que React se encarga de la propagación de eventos y la gestión del ciclo de vida de manera eficiente.

Sin embargo, a veces es necesario renderizar contenido fuera del árbol de React. Por ejemplo, imagina que tienes un componente de diálogo que debe mostrarse en la parte superior de la página, independientemente de dónde esté ubicado el componente padre. Aquí es donde entran en juego los portales de React.

Uso de portales en React

• Configuración básica: Para utilizar un portal en React, primero debes importar la biblioteca react-dom. Luego, puedes utilizar el método createPortal para renderizar un componente en un nodo DOM específico fuera del árbol de React.

import ReactDOM from 'react-dom'; const Modal = ({ children }) => { const portalRoot = document.getElementById('modal-root'); return ReactDOM.createPortal( children, portalRoot ); };

En este ejemplo, Modal es un componente que utiliza un portal para renderizar su contenido en el nodo DOM con el id ‘modal-root’. Esto permite que el contenido del modal esté fuera de la jerarquía del DOM de React.

• Crear el nodo de destino: Antes de usar un portal, debes asegurarte de que el nodo DOM de destino exista en tu documento HTML. En el ejemplo anterior, deberías tener un elemento con el id ‘modal-root’ en tu HTML.

<div id="modal-root"></div>

• Consideraciones importantes: Es importante tener en cuenta que los portales no afectan a la jerarquía del árbol de React. Los componentes renderizados mediante portales siguen siendo hijos de su componente padre original en términos de árbol de componentes, lo que significa que aún pueden acceder a las props y el estado del componente padre.

Ejemplo práctico de portales en React

Supongamos que estás construyendo una aplicación web y quieres implementar un tooltip personalizado. El tooltip debe aparecer en la posición del ratón cuando se pasa el cursor sobre un elemento. Veamos cómo puedes hacerlo utilizando portales en React.

Primero, crea un nuevo componente Tooltip que renderizará el contenido del tooltip.

import React from 'react'; import ReactDOM from 'react-dom'; const Tooltip = ({ text }) => { const tooltipRoot = document.getElementById('tooltip-root'); return ReactDOM.createPortal( <div className="tooltip"> {text} </div>, tooltipRoot ); }; export default Tooltip;

A continuación, asegúrate de que haya un nodo DOM con el id ‘tooltip-root’ en tu HTML.

<div id="tooltip-root"></div>

Luego, en tu componente principal, importa y utiliza el componente Tooltip cuando sea necesario.

import React from 'react'; import Tooltip from './Tooltip'; const App = () => { const showTooltip = (event) => { // Lógica para mostrar el tooltip en la posición del ratón }; return ( <div> <button onMouseEnter={showTooltip}>Mostrar Tooltip</button> {/* ...otros contenidos */} <Tooltip text="Este es un tooltip personalizado" /> </div> ); }; export default App;

En este ejemplo, el componente Tooltip utiliza un portal para renderizar su contenido en el nodo con el id ‘tooltip-root’. Cuando el usuario pasa el cursor sobre el botón, se llama a la función showTooltip, que controla la lógica para mostrar el tooltip en la posición del ratón.

Los portales en React son una característica útil que permite renderizar contenido en cualquier parte del DOM, lo que brinda una mayor flexibilidad y control en la creación de interfaces de usuario. Pueden ser especialmente útiles en situaciones en las que es necesario mostrar contenido fuera de la jerarquía del árbol de React.

Al comprender cómo funcionan los portales en React y cómo usarlos en situaciones prácticas, los desarrolladores pueden mejorar la organización y la usabilidad de sus aplicaciones web.

Continúa aprendiendo en KeepCoding

Si estás interesado en aprender más sobre React y cómo utilizar sus características avanzadas en tus proyectos, considera unirte al Desarrollo Web Full Stack Bootcamp de KeepCoding. Este bootcamp ofrece una formación completa en desarrollo web y te preparará para aprovechar las oportunidades emocionantes en la industria tecnológica. Cambia tu vida y aprovecha la alta demanda de profesionales en el sector tecnológico con salarios atractivos y una estabilidad laboral que otros sectores no pueden ofrecer. ¡No pierdas esta oportunidad y da el salto al mundo de la programación con KeepCoding!