Saltar al contenido

🎉 Material UI v5 is out now! Check out the announcement blog post

Portal

El componente portal renderiza sus hijos en un nuevo "subárbol" fuera de la jerarquía actual de DOM.

Los hijos del componente portal se añadirán al container especificado. El componente es utilizado internamente por los componentes Modal y Popper.

Ejemplo

It looks like I will render here.
<button type="button" onClick={handleClick}>
  {show ? 'Unmount children' : 'Mount children'}
</button>
<div className={classes.alert}>
  It looks like I will render here.
  {show ? (
    <Portal container={container.current}>
      <span>But I actually render here!</span>
    </Portal>
  ) : null}
</div>
<div className={classes.alert} ref={container} />

Lado del servidor

React doesn't support the createPortal() API on the server. Hay que esperar a que la hidratación del lado del cliente vea a los children.