Javascript 在React中使用高阶组件来格式化子组件

我正在构建一个包装器组件，通过将布局配置作为道具，垂直或水平地在网格中呈现子组件：

class App extends React {
  render() {
    return (
      <WrapperComponent layout="horizontal">
        <ChildComponent1>
        <ChildComponent2/>
        <ChildComponent3/>
      </WrapperComponent/>
  }
}

类应用程序扩展{
render（）{
返回(
}
}

我想创建一个HOC，根据传递给

的配置返回

或

组件

因此，代码模式应该是：

const LayoutComponent=HOC（InputComponent）

我无法将

作为输入传递给

HOC

，因为它需要包装

，并且它是此布局的入口点：

---

如何使用HOC实现来达到预期的效果？我知道没有HOC也可以实现，但我特别想通过实现HOC来编写这个程序，因为

和

的一些任务/代码将是相同的，而且还因为我想练习编写HOC。

不要重新发明轮子！这是已经读过的y在那里并准备好使用，请查看：

基本上，如果您将配置作为一个条件进行传递，那么围绕这些行的内容应该可以实现以下目的：

branch(
  test: ( { config } => (config.isVertical),
  left: <VerticalLayout/>,
  right: <HorizontalLayout/>
)

分支(
测试：（{config}=>（config.isVertical），
左：，
正确的：
)

不要重新发明轮子！它已经在那里，可以使用了，看看：

基本上，如果您将配置作为一个条件进行传递，那么围绕这些行的内容应该可以实现以下目的：

branch(
  test: ( { config } => (config.isVertical),
  left: <VerticalLayout/>,
  right: <HorizontalLayout/>
)

分支(
测试：（{config}=>（config.isVertical），
左：，
正确的：
)

能否在我的问题的上下文中显示上述实现的代码？

分支将返回HOC，该HOC将根据传递的配置返回
或
组件，`{config}`是一个简单的道具销毁，假设有一个名为config的道具将在测试条件中使用。我就是这样使用它的？
const HOC=branch（…）；类App扩展React.Component{render（）{return}
是的，我正在寻找一个类似的模式，但我不能使用任何第三方库，如recocompose。recocompose只是一个有用的HOC集合，有一个别致的名称，但代码非常简单，您可以拥有自己的
分支
如HOC，如果您愿意，请查看源代码；）您能在我的问题的上下文中显示上述实现的代码吗？
分支
将返回HOC，该HOC将根据传递的配置返回
或
组件，`{config}`是一个简单的道具销毁，假设有一个名为config的道具将在测试条件中使用。我就是这样使用它的？
const HOC=branch（…）；类App扩展React.Component{render（）{return}
是的，我正在寻找一种类似的模式，但我不能使用任何第三方库，如Recompose。Recompose只是一个有用的HOC集合，有一个别致的名称，但代码非常简单，您可以拥有自己的
分支
如HOC，如果您愿意，请查看源代码；

HOC（）是不正确的。HOC将

组件

作为参数，而不是

元素

。此外，我认为HOC在这里没有什么意义。只要

渲染中的一个简单的
if/else
条件
包装组件
方法，如果我理解正确，它就会起作用。@Prakasharma：是的，我的错，应该是这样的n HOC（InputConpoment）。我知道对于两个布局，HOC没有多大意义，但假设明天我需要更多的布局，那么在这种情况下，编写if-else很多次将不是很优雅。您希望在哪里使用
const LayoutComponent=HOC（）
？在
WrapperComponent
？中似乎有一个
LayoutComponent
，它被包装在您的HOC中？@ChaseDeAnda：这个想法是，按照HOC代码模式，我将一个组件传递给HOC，它返回一个按照配置以所需方式呈现子组件的组件传递给
HOC（）的离子（prop）
是不正确的。HOC将
组件
作为参数，而不是
元素
。此外，我认为HOC在这里没有什么意义。只要
渲染中的一个简单的
if/else
条件
包装组件
方法，如果我理解正确，它就会起作用。@Prakasharma：是的，我的错，应该是这样的n HOC（InputConpoment）。我知道对于两个布局，HOC没有多大意义，但假设明天我需要更多的布局，那么在这种情况下，编写if-else很多次将不是很优雅。您希望在哪里使用
const LayoutComponent=HOC（）
？在
WrapperComponent
？中似乎有一个
LayoutComponent
，它被包装在您的HOC中？@ChaseDeAnda：这个想法是，按照HOC代码模式，我将一个组件传递给HOC，它返回一个按照配置以所需方式呈现子组件的组件离子（prop）传递到
。