Estoy intentando hacer un contenedor Portal simple que haga lo siguiente.

1. Puede representar múltiples portales en la misma vista
2. Puede representar múltiples portales apuntando a ID de padres. Esto no se puede hacer pasando una referencia al componente ya que el contenedor puede vivir en cualquier lugar.
3. Puede representar múltiples portales sin objetivos principales

Esto es lo que se me ocurrió esta mañana. El código funciona exactamente como quiero que funcione. Crea portales con o sin un objetivo principal y los limpia por completo. Sin embargo, React dice que no llame a los ganchos desde las condiciones, lo que puede ver que hice aquí llamando a useRef dentro de un ternario. No he visto ninguna advertencia o error, pero también estoy desarrollando este código en una configuración personalizada con Webpack y Typescript. No he enviado este código a NPM para ver qué sucede cuando importo la biblioteca a un proyecto. Supongo que habrá problemas. ¿Hay una mejor manera de hacer esto?

Gracias por adelantado.

Componente de llamada:

 <div> {open1 && ( <Portal parentId="panel-1"> <Panel title="Poopster" onClose={handleClose1}> <div>Panel</div> </Panel> </Portal> )} {open2 && ( <Portal> <Panel onClose={handleClose2}> <div>Panel</div> </Panel> </Portal> )} <div>

Componente de portal

 import * as React from 'react'; import { createPortal } from 'react-dom'; export interface PortalProps { children: React.ReactElement; parentId?: string; } export const Portal = ({ children, parentId }: PortalProps): React.ReactElement => { let ref = !parentId ? React.useRef(document.createElement('div')) : React.useRef(document.getElementById(parentId)); React.useEffect((): VoidFunction => { return (): void => { if (!parentId && ref.current) { document.body.removeChild(ref.current); } ref = null; }; }, []); React.useEffect(() => { if (!parentId && ref.current) { document.body.appendChild(ref.current); } }, [ref, parentId]); return createPortal(children, ref.current); }; export default Portal;