Portales de reacción: amplíe su caja de herramientas más allá de la perforación de utilería

Conclusiones clave

• Los portales de React le permiten representar el contenido de un componente fuera de su jerarquía de componentes principales, lo que lo hace útil para elementos de la interfaz de usuario como modales y superposiciones.
• Los portales se pueden utilizar en varios escenarios, como modales, integraciones de terceros, menús contextuales e información sobre herramientas, lo que permite una representación flexible en diferentes ubicaciones DOM.
• Al utilizar React Portals, puede separar las preocupaciones de la interfaz de usuario del árbol de componentes principal, mejorar la capacidad de mantenimiento del código y controlar fácilmente el índice z de los componentes para superponer y apilar elementos de la interfaz de usuario.

Las aplicaciones web modernas necesitan interfaces que incluyan elementos como modales e información sobre herramientas. Pero es posible que estos componentes de la interfaz de usuario no siempre se integren bien con la estructura de componentes existente.

React ofrece una solución a este problema a través de una función llamada Portales.

¿Qué son los portales React?

Los portales de React proporcionan una forma de representar el contenido de un componente fuera de su jerarquía de componentes principales. En otras palabras, le permiten representar la salida de un componente en un elemento DOM diferente que no es hijo del componente actual.

Esta característica es útil cuando se trata de componentes de la interfaz de usuario que deben representarse en un nivel superior en el DOM, como modales o superposiciones.

Usos de los portales React

Los portales de React son útiles en varios escenarios:

• Modales y superposiciones. Cuando necesites mostrar diálogos modales o superposiciones, renderízalos en el nivel superior del DOM. Esto garantiza que los estilos o el diseño de sus padres no los limiten.
• Integraciones de terceros. Al integrar bibliotecas de terceros que anticipan la representación en ubicaciones DOM específicas.
• Menús contextuales. Crear menús contextuales que respondan a las interacciones del usuario, que necesita colocar en relación con la ventana gráfica o un elemento DOM específico.
• Información sobre herramientas y ventanas emergentes. Al representar información sobre herramientas o ventanas emergentes que deben aparecer encima de otros componentes, independientemente de su posición en el árbol de componentes.

Cómo funcionan los portales de reacción

Tradicionalmente, cuando renderizas un componente en React, adjuntas su salida al nodo DOM del componente principal. Esto funciona bien en la mayoría de los escenarios, pero resulta limitante cuando es necesario representar contenido fuera de la jerarquía principal.

Supongamos que está creando un diálogo modal. De forma predeterminada, colocará el contenido del modal dentro del nodo DOM del componente principal.

Esto puede provocar conflictos de estilo y otros comportamientos no deseados, ya que el contenido del modal hereda los estilos y restricciones de sus componentes principales.

Los portales de React abordan esta limitación al permitirle especificar un elemento DOM de destino donde se debe representar la salida de un componente.

Esto significa que puede representar cualquier elemento de la interfaz de usuario fuera de la jerarquía DOM del padre, liberándose de las restricciones de los estilos y el diseño del padre.

Cómo utilizar los portales de reacción

Los modales son un ejemplo perfecto de cuándo puedes usar React Portals. Este código de muestra explica el procedimiento.

Configurar una aplicación de reacción básica

Antes de crear un portal, asegúrese de tener configurada una aplicación React básica. Puedes usar herramientas como Create React App para estructurar rápidamente un proyecto.

Crear un portal para modales

Para crear un portal, utilice el ReactDOM.createPortal() función. Se necesitan dos argumentos: el contenido que desea representar y una referencia al nodo DOM para representarlo.

En este ejemplo, el componente modal representa a sus hijos mediante un portal. El contenido aparecerá en el elemento DOM con el ID "raíz".

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Puede definir el contenido de un modal específico en un componente específico. Por ejemplo, este componente ModalContent contiene un párrafo y un Cerca botón:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>
Close</button>
 </div>
 </div>
);

exportdefault ModalContent;

Luego puede abrir el Modal haciendo clic en un botón definido en App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };
return (



Open Modal</button>
 {isModalOpen && (


 </Modal>
 )}
 </div>
 );
};
exportdefault App;

En este ejemplo, el componente modal representa su contenido mediante un portal, separado de la jerarquía del componente principal.

Ejemplos del mundo real

Los portales de React son útiles en diversas situaciones cotidianas.

• Sistema de notificación: cuando creando un sistema de notificación, a menudo desea que los mensajes aparezcan en la parte superior de la pantalla, sin importar dónde se encuentre el componente actual.
• Menú contextual: los menús contextuales deberían aparecer cerca de donde el usuario hace clic, independientemente de dónde se encuentre en la jerarquía DOM.
• Integración de terceros: las bibliotecas de terceros a menudo necesitan apuntar a partes arbitrarias del DOM.

Mejores prácticas para el uso del portal

Para aprovechar al máximo los portales de React, siga estos consejos:

• Seleccione los casos adecuados: los portales son flexibles, pero no todo los necesita. Utilice portales cuando la representación regular cause problemas o conflictos.
• Mantenga el contenido del portal separado: cuando represente contenido a través de portales, asegúrese de que sea autónomo. No debería depender de los estilos o el contexto de los padres.
• Gestione eventos y acciones: con los portales, los eventos funcionan un poco diferente debido al contenido separado. Manejar adecuadamente la propagación de eventos y las acciones.

Beneficios de los portales React

Los portales React ofrecen varios beneficios que pueden mejorar el desarrollo de interfaces de usuario complejas. Ellos:

• Ayude a separar las preocupaciones de la interfaz de usuario del árbol de componentes principal, mejorando la legibilidad y el mantenimiento del código.
• Proporcione flexibilidad para los componentes que necesitan mostrarse fuera de su componente principal.
• Facilite la creación de modales y superposiciones independientes del resto de la interfaz de usuario.
• Le permite controlar fácilmente el índice z de los componentes, lo que garantiza que pueda superponer y apilar ordenadamente los elementos de la interfaz de usuario.

Posibles obstáculos y consideraciones

Si bien los portales React son útiles, tenga en cuenta lo siguiente:

• Problemas de CSS: los portales pueden provocar un comportamiento inesperado del estilo CSS ya que colocan el contenido fuera de los componentes principales. Utilice estilos globales o administre el alcance de CSS con cuidado.
• Accesibilidad: cuando utilice portales para representar contenido, recuerde mantener intactas las funciones de accesibilidad como la navegación con el teclado y la compatibilidad con el lector de pantalla.
• Representación del lado del servidor: Es posible que los portales no combinen bien con renderizado del lado del servidor (SSR). Comprender los efectos y limitaciones del uso de portales en configuraciones SSR.

Impulsando la interfaz de usuario más allá de la norma

Los portales React ofrecen una solución sólida para manejar situaciones de interfaz de usuario complejas que necesitan que el contenido aparezca más allá de los límites de los componentes principales.

Al comprender los portales y utilizar las mejores prácticas, puede crear interfaces de usuario que sean más adaptables y fáciles de mantener, evitando al mismo tiempo problemas.

Ya sea que esté creando modales o incorporando bibliotecas de terceros, los portales React brindan una respuesta poderosa para abordar las necesidades exigentes de la interfaz de usuario.