React: Renderice varios componentes sin un elemento envolvente

No encontré un problema duplicado, solo esta publicación https://groups.google.com/forum/#!searchin/reactjs/render $ 20multiple / reactjs / pHNJe8trFOg / J-zd4jxAkJ4J

Tengo un caso de uso válido y me gusta compartirlo.

Estoy construyendo un marco para contar historias basado en reaccionar. Cada elemento está posicionado fijo, ya que escribí un motor de diseño personalizado y necesito un control total sobre todo. Mi estructura de nivel de entrada se parece a esto

<Story>
    <Grid />
    <UI />
</Story>

<Grid> muestra todos los elementos reales ( <GridItem> ) de la historia (texto, imágenes, videos, etc.). <UI /> representa elementos de la interfaz de usuario que son comunes a todas las historias. Por ejemplo, <VolumeControl> para controlar el volumen de los elementos de audio / video.

Si renderizara la estructura como se indica arriba, este sería el resultado

<div>
    <div>
        <!--list of GridItems-->
    </div>
    <div>
        <!--list of UI components-->
    </div>
</div>

Dado que todo está posicionado fijo, esto no funciona. La capa de la interfaz de usuario cubre todo, por lo que es inutilizable (por ejemplo, no se puede hacer clic en los videos). Es por eso que actualmente me veo obligado a hacer lo siguiente en el método render de Story

<div>
    <Grid />
    <VolumeControl />
    <Navigation />
    <ShareButtons />
</div>

Esto funciona pero es feo ya que pierdo la separación. No quiero que el componente Story tenga que conocer todos los componentes de la interfaz de usuario. Sth. como un componente virtual <Fragment> que representa a sus hijos sin un elemento contenedor resolvería el problema, ya que podría devolverlo desde el componente <UI> .

Sé que este es un caso de uso poco común, tengo bastante talento para llegar a los casos extremos de cada marco que toco.

Es curioso cómo escribir estas cosas a veces hace que tu cerebro haga cosas útiles por arte de magia. Encontré otra solución. Estoy usando visiblity:none en la capa de la interfaz de usuario y visibility:visible en los componentes de la interfaz de usuario. Pero es un truco, nada más.