把组件当作道具传递？组分与高阶组分

Question

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

当我想要创建一个组合风格的包装组件时，我是否正确地认为我必须使用props.children？

我是否正确地认为，如果我想传递两个不同的组件(如下面的高阶组件示例)，我必须使用高阶组件样式吗？

Compositional:

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

是的你是对的。组合风格的允许您提前将子组件传递给组件，然后他们才会意识到它们有它们。所以我们可以这样做：

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

因此，对于h1和p标记，具有'fancyborder‘的className的div将覆盖/包装/包围它们。

关于HOCS，您也是正确的。它们是作为输入接收其他组件和作为输出呈现组件的组件。

请原谅我没有提供密码。我用的是触控装置。希望这能帮上忙。

Answer 2

两样都有用。从您编写它的方式来看，这是一种编码风格/层次化的选择。有反模式的反应，但这不是其中之一。

Answer 3

设置布局的方式是将工作流或proyect结构划分为表示(无状态)组件和容器组件。表示组件将只从它们的主要组件接收道具，而容器组件将包含应用程序的逻辑。