React: Renderizar vários componentes sem um elemento envolvente

Não encontrei um problema duplicado, apenas esta postagem https://groups.google.com/forum/#!searchin/reactjs/render $ 20multiple / reactjs / pHNJe8trFOg / J-zd4jxAkJ4J

Tenho um caso de uso válido e gostaria de compartilhá-lo.

Estou construindo uma estrutura para contar histórias com base na reação. Cada elemento é posicionado de forma fixa, pois escrevi um mecanismo de layout personalizado e preciso ter controle total sobre tudo. Minha estrutura de nível de entrada é mais ou menos assim

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

<Grid> renderiza todos os itens reais ( <GridItem> ) da história (texto, imagens, vídeos, etc.). <UI /> renderiza elementos da IU que são comuns a todas as histórias. Por exemplo, um <VolumeControl> para controlar o volume dos itens de áudio / vídeo.

Se eu renderizasse a estrutura conforme dado acima, este seria o resultado

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

Como tudo está posicionado de forma fixa, isso não funciona. A camada da IU cobre tudo, tornando-o inutilizável (por exemplo, não consigo clicar em vídeos). É por isso que sou forçado a fazer o seguinte no método render de Story

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

Isso funciona, mas é feio, pois perco a separação. Não quero que o componente Story conheça todos os componentes da IU. Sth. como um componente virtual <Fragment> que renderiza seus filhos sem um elemento de invólucro, resolveria o problema, pois eu poderia retorná-lo do componente <UI> .

Eu sei que este é um caso de uso raro, eu sou bastante talentoso em alcançar os casos extremos de cada framework que eu toco.

Engraçado como escrever essas coisas às vezes faz com que seu cérebro faça coisas úteis de maneira mágica. Eu encontrei outra solução alternativa. Estou usando visiblity:none na camada de IU e visibility:visible nos componentes de IU. Mas é um hack, nada mais.