Componente funcional del portal React

Los portales proporcionan un método de primera clase para representar elementos secundarios en un nodo DOM que está fuera de la jerarquía DOM del componente principal. En este artículo, aprenderemos a usar los componentes funcionales del portal de ReactJS.

Componente funcional de React Portal en ReactJS

En esencia, montamos nuestro elemento App sobre nuestro elemento raíz. El uso de un elemento div con la raíz id como elemento DOM principal se ha convertido prácticamente en una práctica estándar.

Todos los componentes de React en nuestra aplicación se pueden encontrar en el elemento raíz, que se encuentra dentro de una oración si observa el árbol DOM del navegador. Sin embargo, React Portals nos permite salir de este árbol DOM y renderizar un componente en un nodo DOM que no está debajo de este elemento raíz.

Hacer esto viola una jerarquía de padre-hijo y requiere que un componente se presente como un elemento nuevo.

Sintaxis:

ReactDOM.createPortal(child, container)

1. El primer argumento es un hijo, que puede ser cualquier cosa renderizable, como un elemento, una cadena o un fragmento (hijo).
2. El contenedor es un elemento DOM y es el segundo argumento.

Los componentes hijos necesitan salir visualmente del contenedor principal. A continuación se muestra uno de los casos de uso más frecuentes del Portal.

1. Cuadros de diálogo con modales
2. Tarjetas flotantes
3. Menús flotantes
4. Información sobre herramientas
5. Cargadores

Cuando utilice React Portals, tenga en cuenta lo siguiente. A menos que conozcas a alguien, estas tendencias no son evidentes de inmediato.

1. Independientemente de dónde se encuentre el Nodo del portal en el DOM, el burbujeo de eventos funcionará según lo previsto mediante la propagación de eventos a los predecesores del árbol React.
2. React todavía controla el ciclo de vida de los elementos secundarios cuando los renderiza a través de los Portales.
3. El árbol de componentes de React no se ve afectado por portal, que solo altera la estructura HTML DOM.
4. Al utilizar portales, debe especificar un elemento DOM HTML como punto de montaje para el componente del portal.

Usemos el siguiente ejemplo para entender la idea mencionada.

Código:

const PortalModal = ({message, isModalOpen, onClose}) => {
  if (!isModalOpen) return null;
  return ReactDOM.createPortal(
     <div className='modal'>
      <p>{message}</p>
      <button onClick={onClose}>X</button>
     </div>
    ,document.body);
  }
function Component() {
  const [modalOpen, setModalOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Open Modal</button>
      <PortalModal
  message = 'Hello DelftStack Readers!'
       isModalOpen={modalOpen}
       onClose={
    () => setModalOpen(false)}
      />
    </div>
  )
}

Hemos creado el portal para el modal en el ejemplo anterior. El modal se abrirá y aparecerá fuera del elemento raíz tan pronto como el usuario haga clic en el botón.

Los componentes principales no heredarían ni cambiarían las dimensiones de este modal porque se representan fuera de la jerarquía raíz.

Producción:

Ejecutar demostración