React: Mehrere Komponenten ohne Umhüllungselement rendern

Ich habe kein doppeltes Problem gefunden, nur diesen Beitrag https://groups.google.com/forum/#!searchin/reactjs/render $20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J

Ich habe einen gültigen Anwendungsfall und möchte ihn teilen.

Ich baue einen Rahmen für das Geschichtenerzählen basierend auf reagieren. Jedes einzelne Element ist fest positioniert, da ich eine benutzerdefinierte Layout-Engine geschrieben habe und die volle Kontrolle über alles benötige. Meine Einstiegsstruktur sieht in etwa so aus

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

<Grid> rendert alle tatsächlichen Elemente ( <GridItem> ) der Geschichte (Text, Bilder, Videos usw.). <UI /> rendert UI-Elemente, die jeder Story gemeinsam sind. Zum Beispiel ein <VolumeControl> zum Regeln der Lautstärke von Audio-/Videoelementen.

Wenn ich die Struktur wie oben angegeben rendern würde, wäre dies das Ergebnis

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

Da alles fest positioniert ist, funktioniert dies nicht. Die UI-Schicht deckt alles ab und macht sie unbrauchbar (zB kann nicht auf Videos geklickt werden). Deshalb bin ich derzeit gezwungen, in der render Methode von Story Folgendes zu tun:

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

Das funktioniert, ist aber hässlich, da ich die Trennung verliere. Ich möchte nicht, dass die Story Komponente über jede UI-Komponente Bescheid wissen muss. etw. wie eine virtuelle <Fragment> Komponente, die ihre untergeordneten Elemente ohne ein Wrapper-Element rendert, das Problem lösen würde, da ich es von der <UI> Komponente zurückgeben könnte.

Ich weiß, dass dies ein seltener Anwendungsfall ist, ich bin ziemlich talentiert darin, die Randfälle jedes Frameworks zu erreichen, das ich berühre.

Komisch, wie das Aufschreiben dieser Dinge manchmal Ihr Gehirn auf magische Weise dazu bringt, nützliche Dinge zu tun. Ich habe einen anderen Workaround gefunden. Ich verwende visiblity:none auf der UI-Ebene und visibility:visible auf den UI-Komponenten. Aber es ist ein Hack, mehr nicht.