Este dilema se puede solucionar de diversas formas, sin embargo te mostramos la que en nuestra opinión es la solución más completa.

Solución:

React v16 acaba de lanzarse hace un par de horas (¡¡Yay!!) que admite oficialmente Portal.

¿Qué es Portal? Desde ¿Cuánto tiempo ha estado allí?

Los portales brindan una forma de primera clase de representar elementos secundarios en un nodo DOM que existe fuera de la jerarquía DOM del componente principal.

Portal no es un concepto nuevo en la comunidad de reacción. Hay muchas bibliotecas disponibles que admiten este tipo de funcionalidad. por ejemplo, portal de reacción y puerta de enlace de reacción.

¿Qué sucede al renderizar cualquier aplicación de reacción?

Generalmente, cuando se renderiza cualquier aplicación de React, se utiliza un único elemento DOM para renderizar todo el árbol de React.

class HelloReact extends React.Component 
   render() 
       return (
          
Hello React
       );
   


ReactDOM.render(, document.getElementById('root'));

Como puede ver, estamos representando nuestro componente de reacción en un elemento DOM con id. root.

¿Qué es Portal y por qué es necesario? ¿Por qué está ahí?

Los portales son una forma de representar a los niños de React fuera de la jerarquía DOM principal del componente principal sin perder el contexto de reacción. Lo estoy enfatizando porque bibliotecas muy populares como react-router, redux usa mucho el contexto de reacción. Así que la disponibilidad de contexto al usar Portal es muy útil

Según los documentos de reacción,

Un caso de uso típico para los portales es cuando un componente principal tiene un estilo overflow: hidden o z-index, pero necesita que el elemento secundario “salga” visualmente de su contenedor. Por ejemplo, cuadros de diálogo, hovercards e información sobre herramientas.

Entonces, con los portales, puede representar un árbol de reacción paralelo en otro nodo DOM cuando sea necesario. Aunque se representa en el nodo DOM diferente, el componente principal puede capturar los eventos no capturados. Consulte este codepen proporcionado en los documentos en sí.

El siguiente ejemplo debería darle más idea:

// index.html

    
        

        

    


// index.jsx
const mainContainer = document.getElementById('root');
const portalContainer = document.getElementById('another-root');

class HelloFromPortal extends React.Component 
    render() 
         return (
           
I am rendered through a Portal.
         );
    


class HelloReact extends React.Component 
    render() 
        return (
             

                 
Hello World
                  ReactDOM.createPortal(, portalContainer) 
             
        );
    


ReactDOM.render(, mainContainer);

Puede usar el elemento de inspección de devtools y ver que

I am rendered through a Portal.

se representa por dentro #another-root etiqueta, mientras que

Hello World

se representa por dentro #root etiqueta.

Espero que esto ayude 🙂

Actualizar: Para responder al comentario de @PhillipMunin.

¿Cuál es la diferencia entre ReactDOM.render y
ReactDOM.createPortal?

1. Aunque el componente representado a través del portal se represente en otro lugar (fuera de la raíz del contenedor actual), permanece presente como elemento secundario del mismo componente principal. (Quien invoco el ReactDOM.createPortal) Entonces, cualquier evento en el niño se propaga al padre. (Ofc, esto no funciona si detiene manualmente la propagación del evento).

2. Se puede acceder al mismo contexto dentro del componente representado a través de un portal. Pero no en el caso de que lo hagamos ReactDOM.render directamente.

He creado otra demostración para ilustrar mi punto. https://codesandbox.io/s/42x771ykwx

Creo que podemos lograr la misma característica creando un nodo dom externo fuera del elemento ‘raíz’

node = document.createElement('div')
document.body.appendChild(node)
ReactDOM.render(,node)

Digamos que estamos creando una vista modal, podemos crear un contenedor para el mismo

import React,  useEffect  from 'react'
import ReactDOM from 'react-dom'
import Modal from './Modal'
let node = null
const ModalWrapper = (props) =>
    useEffect(()=>
        node && ReactDOM.render(,node)
    )
    useEffect(()=>
        node = document.createElement('div')
        document.body.appendChild(node)
        ReactDOM.render(,node)
    ,[])
    return(