反应中的组件设计，将“全高”放在哪里？

Question

在使用react（实际上是ClojureScript包装器试剂）一段时间之后，我仍然不确定解决以下问题的最佳方法是什么：

假设您有一个Root组件：

class Root extends React.Component {
  render() {
    return (
      <div style="display: flex">
        <div style="flex: 2 1">
          <Content></Content>
        </div>
        <div style="flex: 1 1">
          <Menu></Menu>
        </div> 
      </div>
    );
  }
}

这将屏幕垂直分成一个较大的内容部分和一个较小的菜单部分。 我想说，这种分离显然是Root组件应注意的事情。 Menu组件本身可以在flex道具没有任何意义的另一种上下文中使用。

class Menu extends React.Component {
  render() {
    return (
      <div style="background-color: red">
         Buttons, etc...
      </div>
    );
  }

但是，菜单具有某些绝对属于其中的属性：例如背景色。 但是，如果运行此示例，我们将注意到背景颜色未填充Root组件中定义的“菜单”区域。 那是因为它缺少一些height / width =“ 100％”样式属性。

我看到两种解决方法：将它们放在Menu组件中。 但这可能也不适用于该组件的其他用途。 如果有人不希望使用Menu处于其全高状态，则必须重新包装。 或者，将宽度和高度作为道具传递给组件，这也需要很多开销...

通常，菜单不会被大量重复使用，但是这种模式在许多其他情况下也会出现。 去这里要走什么路？ 也许有第三种方法可以做到这一点？

编辑/ NOTE：

也许transferPropsTo是我所需要的，但是我仍然将其留给讨论...

Answer 1

align-items flexbox CSS道具在这里有用吗？

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7