React: ラッピング要素なしで複数のコンポーネントをレンダリングする

重複する問題は見つかりませんでした。この投稿のみhttps://groups.google.com/forum/#!searchin/reactjs/render$ 20multiple / reactjs / pHNJe8trFOg / J-zd4jxAkJ4J

私は有効なユースケースを持っており、それを共有したいと思います。

私はreactに基づいたストーリーテリングのフレームワークを構築しています。 カスタムレイアウトエンジンを作成したため、すべての要素が固定されて配置され、すべてを完全に制御する必要があります。 私のエントリーレベルの構造は次のようになります

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

<Grid>は、ストーリーのすべての実際のアイテム（ <GridItem> ）（テキスト、画像、ビデオなど）をレンダリングします。 <UI />は、すべてのストーリーに共通のUI要素をレンダリングします。 たとえば、オーディオ/ビデオアイテムの音量を制御するための<VolumeControl> 。

上記のように構造をレンダリングすると、これが結果になります

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

すべてが固定されているため、これは機能しません。 UIレイヤーはすべてをカバーしているため、使用できません（たとえば、ビデオをクリックできない）。 そのため、私は現在、 Storyのrenderメソッドで次のことを強制されています。

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

これは機能しますが、分離が失われるため醜いです。 StoryコンポーネントがすべてのUIコンポーネントについて知る必要はありません。 Sth。 ラッパー要素なしで子をレンダリングする仮想<Fragment>コンポーネントのように、 <UI>コンポーネントから返すことができるので、問題は解決します。

これはまれなユースケースであることを私は知っています。私は、触れるすべてのフレームワークのエッジケースに到達するのにかなり才能があります。

これらのことを書き留めることで、魔法のように脳が有用なことをすることがあるのはおかしいです。 別の回避策を見つけました。 私が使用していますvisiblity:none UI層の上とvisibility:visible UIコンポーネントに。 しかし、それはハックであり、それ以上のものではありません。