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

Question

我正在构建一个包装器组件，通过将布局配置作为 Prop ，在网格中垂直或水平渲染子组件:

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

我想创建一个 HOC，它返回 <VerticalLayout/>或<HorizontalLayout/>组件取决于传递给 <WrapperComponent/> 的配置。

所以代码模式应该是: const LayoutComponent = HOC(InputComponent) .

我无法通过<WrapperComponent/>作为 HOC 的输入，因为它需要包裹 <ChildComponents/> ，它是此布局的入口点:

如何通过 HOC 实现实现预期结果？我知道这可以在没有 HOC 的情况下实现，但我特别想通过实现 HOC 来编写这个程序，如 <VerticalLayout/> 的一些任务/代码和<HorizontalLayout/>会是一样的，也是因为我想练习编写 HOC。

Answer 1

不要重新发明轮子!它已经存在并且可以使用，请查看:https://github.com/acdlite/recompose/blob/master/docs/API.md#branch

基本上，您将配置作为条件传递，这些行周围的内容应该可以解决问题:

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