M

MLOG

Español

Una guía completa de React Portals, que cubre sus casos de uso, implementación, beneficios y mejores prácticas para renderizar contenido fuera de la jerarquía estándar de componentes.

React Portals: Renderizando Contenido Fuera del Árbol de Componentes

Los portales de React proporcionan un mecanismo poderoso para renderizar componentes secundarios en un nodo DOM que existe fuera de la jerarquía DOM del componente principal. Esta técnica es invaluable en varios escenarios, como modales, tooltips y situaciones donde necesita un control preciso sobre el posicionamiento y el orden de apilamiento de los elementos en la página.

¿Qué son los React Portals?

En una aplicación React típica, los componentes se renderizan dentro de una estructura jerárquica estricta. El componente principal contiene componentes secundarios, y así sucesivamente. Sin embargo, a veces necesita liberarse de esta estructura. Aquí es donde entran los portales de React. Un portal le permite renderizar el contenido de un componente en una parte diferente del DOM, incluso si esa parte no es un descendiente directo del componente en el árbol de React.

Imagine que tiene un componente modal que necesita mostrarse en el nivel superior de su aplicación, independientemente de dónde se renderice en el árbol de componentes. Sin portales, podría intentar lograr esto usando posicionamiento absoluto y z-index, lo que puede generar problemas de estilo complejos y posibles conflictos. Con los portales, puede renderizar directamente el contenido del modal en un nodo DOM específico, como un elemento dedicado "modal-root", asegurando que siempre se renderice en el nivel correcto.

¿Por qué usar React Portals?

React Portals aborda varios desafíos comunes en el desarrollo web:

Cómo implementar React Portals

Usar React Portals es sencillo. Aquí hay una guía paso a paso:

  1. Crear un nodo DOM: Primero, cree un nodo DOM donde desee renderizar el contenido del portal. Esto generalmente se hace en su archivo `index.html`. Por ejemplo: 
    <div id="modal-root"></div>
  2. Usar `ReactDOM.createPortal()`: En su componente React, use el método `ReactDOM.createPortal()` para renderizar el contenido en el nodo DOM creado. Este método toma dos argumentos: el nodo React (el contenido que desea renderizar) y el nodo DOM donde desea renderizarlo. 
    import ReactDOM from 'react-dom';

function MyComponent() {
  return ReactDOM.createPortal(
    <div>¡Este contenido se renderiza en el modal-root!</div>,
    document.getElementById('modal-root')
  );
}

export default MyComponent;
  3. Renderizar el componente: Renderice el componente que contiene el portal como lo haría con cualquier otro componente React. 
    function App() {
  return (
    <div>
      <h1>Mi App</h1>
      <MyComponent />
    </div>
  );
}

export default App;

En este ejemplo, el contenido dentro de `MyComponent` se renderizará dentro del elemento `modal-root`, aunque `MyComponent` se renderiza dentro del componente `App`.

Ejemplo: Creación de un componente modal con React Portals

Creemos un componente modal completo utilizando React Portals. Este ejemplo incluye estilos básicos y funcionalidad para abrir y cerrar el modal.

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

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => {
    setIsOpen(false);
    onClose();
  };

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-content">
          {children}
        </div>
        <button onClick={handleClose}>Cerrar</button>
      </div>
    </div>,
    modalRoot
  );
}

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  return (
    <div>
      <h1>Mi App</h1>
      <button onClick={handleOpenModal}>Abrir Modal</button>
      {showModal && (
        <Modal onClose={handleCloseModal}>
          <h2>Contenido del Modal</h2>
          <p>Este es el contenido del modal.</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

En este ejemplo:

También necesitaría agregar algunos estilos CSS a las clases `modal-overlay` y `modal` para posicionar el modal correctamente en la pantalla. Por ejemplo:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.modal-content {
  margin-bottom: 10px;
}

Manejo de eventos con Portales

Una consideración importante al usar portales es cómo se manejan los eventos. El bubbling de eventos funciona de manera diferente con los portales que con los componentes React estándar.

Cuando ocurre un evento dentro de un portal, se propagará a través del árbol DOM como de costumbre. Sin embargo, el sistema de eventos de React trata el portal como un nodo React regular, lo que significa que los eventos también se propagarán a través del árbol de componentes React que contiene el portal.

Esto a veces puede generar un comportamiento inesperado si no tiene cuidado. Por ejemplo, si tiene un controlador de eventos en un componente principal que solo debe activarse por eventos dentro de ese componente, también podría activarse por eventos dentro del portal.

Para evitar estos problemas, puede usar el método `stopPropagation()` en el objeto de evento para evitar que el evento se propague más. Alternativamente, puede usar los eventos sintéticos de React y el renderizado condicional para controlar cuándo se activan los controladores de eventos.

Aquí hay un ejemplo de cómo usar `stopPropagation()` para evitar que un evento se propague al componente principal:

function MyComponent() {
  const handleClick = (event) => {
    event.stopPropagation();
    console.log('¡Hizo clic dentro del portal!');
  };

  return ReactDOM.createPortal(
    <div onClick={handleClick}>Este contenido se renderiza en el portal.</div>,
    document.getElementById('portal-root')
  );
}

En este ejemplo, al hacer clic en el contenido dentro del portal se activará la función `handleClick`, pero el evento no se propagará a ningún componente principal.

Mejores prácticas para usar React Portals

Aquí hay algunas mejores prácticas a tener en cuenta al trabajar con React Portals:

Alternativas a React Portals

Si bien React Portals son una herramienta poderosa, existen enfoques alternativos que puede usar para lograr resultados similares. Algunas alternativas comunes incluyen:

La elección de qué enfoque usar depende de los requisitos específicos de su aplicación y la complejidad de los elementos de la interfaz de usuario que está tratando de crear. Los portales son generalmente la mejor opción cuando necesita un control preciso sobre el posicionamiento y el orden de apilamiento de los elementos y desea evitar conflictos de CSS.

Consideraciones globales

Al desarrollar aplicaciones para una audiencia global, es esencial considerar factores como la localización, la accesibilidad y las diferencias culturales. React Portals pueden desempeñar un papel en la abordación de estas consideraciones:

Al tener en cuenta estas consideraciones globales, puede crear aplicaciones más inclusivas y fáciles de usar para una audiencia diversa.

Conclusión

React Portals son una herramienta poderosa y versátil para renderizar contenido fuera del árbol de componentes estándar. Proporcionan una solución limpia y elegante para patrones de interfaz de usuario comunes, como modales, tooltips y popovers. Al comprender cómo funcionan los portales y seguir las mejores prácticas, puede crear aplicaciones React más flexibles, mantenibles y accesibles.

Experimente con los portales en sus propios proyectos y descubra las muchas formas en que pueden simplificar su flujo de trabajo de desarrollo de la interfaz de usuario. Recuerde considerar el manejo de eventos, la accesibilidad y las consideraciones globales al usar portales en aplicaciones de producción.

Al dominar React Portals, puede llevar sus habilidades de React al siguiente nivel y crear aplicaciones web más sofisticadas y fáciles de usar para una audiencia global.

React Portals: Renderizando Contenido Fuera del Árbol de Componentes | MLOG