React: Rendu de plusieurs composants sans élément d'emballage

Je n'ai pas trouvé de problème en double, seulement ce post https://groups.google.com/forum/#!searchin/reactjs/render $20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J

J'ai un cas d'utilisation valide et j'aime le partager.

Je construis un cadre de narration basé sur la réaction. Chaque élément est positionné de manière fixe car j'ai écrit un moteur de mise en page personnalisé et j'ai besoin d'un contrôle total sur tout. Ma structure de niveau d'entrée ressemble à ceci

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

<Grid> rend tous les éléments réels ( <GridItem> ) de l'histoire (texte, images, vidéos, etc.). <UI /> rend les éléments d'interface utilisateur communs à chaque histoire. Par exemple un <VolumeControl> pour contrôler le volume des éléments audio/vidéo.

Si je devais rendre la structure comme indiqué ci-dessus, ce serait le résultat

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

Comme tout est positionné fixe, cela ne fonctionne pas. La couche d'interface utilisateur couvre tout, le rendant inutilisable (par exemple, impossible de cliquer sur les vidéos). C'est pourquoi je suis actuellement obligé de faire ce qui suit dans la méthode render de Story

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

Cela fonctionne mais est moche car je perds la séparation. Je ne veux pas que le composant Story connaisse chaque composant de l'interface utilisateur. qch. comme un composant virtuel <Fragment> qui rend ses enfants sans élément wrapper résoudrait le problème car je pourrais le renvoyer à partir du composant <UI> .

Je sais que c'est un cas d'utilisation rare, je suis plutôt doué pour atteindre les cas limites de chaque framework que je touche.

C'est drôle comme le fait d'écrire ces choses fait parfois comme par magie que votre cerveau fait des choses utiles. J'ai trouvé une autre solution de contournement. J'utilise visiblity:none sur la couche d'interface utilisateur et visibility:visible sur les composants d'interface utilisateur. Mais c'est un hack, rien de plus.