Question

我正在为我的React应用创建一些布局级别的组件。据我所知，我可以使用两种主要的设计模式 - 组合和高阶组件。

当我想在组合样式中创建包装器组件时，我是否正确认为必须使用props.children？

我认为如果我想传递两个不同的组件（如下面的高阶组件示例中），我是正确的，我必须使用高阶组件风格？

组成：

const CenteredColumn = props => (
  <div className="columns">
    <div className="column is-8 is-offset-2">{props.children}</div>
  </div>
);

高阶组件：

const withTwoColumns = ({ first, second }) => (
  <div className="columns">
    <div className="column">{first}</div>
    <div className="column">{second}</div>
  </div>
);

Answer 1

两者都有效。从你编写它的方式来看，它是一种编码风格/等级选择。 React有反模式，但这不是其中之一。

Answer 2

是的，你是对的。 组合风格允许您在知道他们拥有子组件之前提前将子组件传递给组件。所以我们可以这样做：

请参阅：https://facebook.github.io/react/docs/composition-vs-inheritance.html

所以对于h1和p标签，className为＆＃39; fancyborder＆＃39;将覆盖/包裹/包围它们。

关于HOCS ，您也是对的。它们是组件，它们接收其他组件作为输入，并将组件作为输出。

请原谅我不提供代码。我用过触控设备。希望这有帮助。

Answer 3

您应该如何设置布局是通过在presentatational（无状态）组件和Container组件中划分工作流程或proyect结构。表示组件只接收来自其主要组件的道具，而容器组件将包含逻辑申请。

将组件作为道具传递？组合与高阶组件

3 个答案: