使用React显示组件的弹性框

Question

我正在使用React 15，我有一个带有一些切换控件的组件。它们使用flexbox显示：

其中一些在激活时可以显示/隐藏选项（单击右箭头），请参见下图：

• 但是，“动词时态”切换控件“移至底部”。我希望两个切换控件保持固定，并且在单击向右箭头时仅显示一个或另一个与控件相关的选项：

我应该控制宽度（响应式设计），以便知道flexbox何时断行并以这种方式绘制选项框，而不是在相关切换后立即渲染吗？有什么解决方法吗？因为如果是这种情况，我请客人使用flexbox毫无意义。

还有一个问题：

随着组件代码变长，我决定为每个控件编写一个组件。控件将如下所示：

<div>
   <ToggleControl>
   { this.state.showOptions && <Options />}
</div>

但是，这种方式的渲染效果更糟，因为ToggleControl和Options都不是flexbox的子级，因此在上一张图片这样的条件下，Verbal Tense切换条也会飞到下一行（Option的宽度为100％ ）显示其相关选项时。我想我可以用React Fragments来解决这个问题，但是我正在使用React 15，现在不是一个选项：-（。

解决第一个问题，但要解决组件问题，我想应该在组件之外呈现每个组件选项。我想这是Portal要做的，但是我又在使用React 15 ...

有什么想法或解决方法吗？