Portal

El componente Portal permite renderizar sus hijos en un nodo DOM que existe fuera de la propia jerarquía DOM del Portal.

Introducción

Portal es un componente de utilidad construido alrededor de API createPortal() de React. Proporciona la funcionalidad de createPortal() en forma de componente.

El componente Portal es utilizado internamente por los componentes Modal y Popper.

Componente

import Portal from '@u_ui/u-ui/Portal';

Normalmente, los hijos de un componente se renderizan dentro del árbol DOM de ese componente. Pero a veces es necesario montar un hijo en una ubicación diferente en el DOM.

El componente Portal acepta una proposición container que pasa una ref al nodo DOM donde se montarán sus hijos.

La siguiente demostración muestra cómo un <span> anidado dentro de un Portal puede añadirse a un nodo fuera de la jerarquía DOM del Portal: haga clic en Montar hijos para ver cómo se comporta:

Parece que voy a renderizar aquí.

<Button type="button" onClick={handleClick}>
  {show ? 'Desmontar hijos' : 'Montar hijos'}
</Button>
<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
  Parece que voy a renderizar aquí.
  {show ? (
    <Portal container={() => container.current!}>
      <span>¡Pero en realidad renderizo aquí!</span>
    </Portal>
  ) : null}
</Box>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />

<Button type="button" onClick={handleClick}>
  {show ? 'Desmontar hijos' : 'Montar hijos'}
</Button>
<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
  Parece que voy a renderizar aquí.
  {show ? (
    <Portal container={() => container.current!}>
      <span>¡Pero en realidad renderizo aquí!</span>
    </Portal>
  ) : null}
</Box>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />

Press Enter to start editing

Del lado del servidor

La API DOM no está disponible en el servidor, por lo que necesitas usar la llamada de retorno container prop. Este callback es llamado durante un efecto de diseño de React:

<Portal container={() => document.getElementById('filter-panel')!}>
  <Child />
</Portal>

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.

<Portal />