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>
    );
  }

然而，菜单中有一些属于那里的属性：例如背景颜色。但是，如果我们运行此示例，我们会注意到背景颜色没有填充“菜单”＃39;根组件中定义的区域。这是因为它缺少一些高度/宽度=＆＃34; 100％＆＃34;风格属性。

我看到两种解决方法：将它们放在Menu组件中。但这可能不适用于组件的其他用途。如果有人想要使用不在其中的菜单的全高，则必须再次包裹。或者，将宽度和高度作为道具传递给组件，这也是一些开销......

通常菜单不会被重复使用，但这种模式在很多其他情况下都会出现。什么方式去这里？可能有第三种方法吗？

EDIT /注：

也许transferPropsTo是我需要的，但我还是要讨论......

反应中的元件设计，在哪里放置全高度？

0 个答案: