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 层涵盖了所有内容，使其无法使用（例如无法点击视频）。 这就是为什么我现在被迫的做在下面的render的方法Story

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

这有效，但很丑，因为我失去了分离。 我不希望Story组件必须了解每个 UI 组件。 …… 就像一个虚拟的<Fragment>组件，它在没有包装元素的情况下呈现它的子级将解决这个问题，因为我可以从<UI>组件返回它。

我知道这是一个罕见的用例，我在触及我接触的每个框架的边缘情况方面很有天赋。

有趣的是，写下这些东西有时会神奇地让你的大脑做有用的事情。 我找到了另一种解决方法。 我在 UI 层上使用visiblity:none visibility:visible ，在 UI 组件上使用