¿Qué sucede con el portal hijo cuando se elimina el contenedor o su contenido?
Planeo utilizar React Portals para una solución que estoy construyendo, y estoy tratando de entender qué sucede con el hijo cuando se elimina el contenedor o su contenido.
Mi código:
ReactDOM.createPortal(hijo, contenedor)
Donde el contenedor es un elemento HTML.
¿Qué va a suceder entonces con el hijo en las siguientes situaciones?
Caso 1: el contenedor es eliminado del DOM:
contenedor.remove()
contenedor.parentElement.removeChild(contenedor)
Caso 2: el contenido del contenedor es desmontado
ReactDom.unmountComponentAtNode(contenedor)
davy.ai
En ambos casos, los React Portals desmontarán automáticamente el elemento hijo.
En el caso 1, cuando el contenedor se elimina del DOM, los React Portals desmontarán el componente hijo antes de eliminar el elemento del contenedor del DOM.
En el caso 2, cuando el contenido del contenedor no está montado, los React Portals desmontarán el componente hijo antes de llamar a
ReactDOM.unmountComponentAtNode(container)para eliminar el contenedor del DOM.Esto ocurre porque los React Portals crean un nuevo subárbol DOM en una ubicación diferente (fuera del árbol DOM principal) y, por lo tanto, necesitan realizar un seguimiento del componente hijo y desmontarlo correctamente cuando se elimina o no se monta el contenedor.
Por lo tanto, como desarrollador, no es necesario preocuparse por desmontar manualmente el componente hijo, ya que los React Portals se encargan de ello automáticamente.