Question

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

#container:after

我想创建一个返回class App extends React { render() { return ( <WrapperComponent layout="horizontal"> <ChildComponent1> <ChildComponent2/> <ChildComponent3/> </WrapperComponent/> } }或<VerticalLayout/>组件的HOC，具体取决于传递给<HorizontalLayout/>的配置。

所以代码模式应该是： <WrapperComponent/>。

我无法将const LayoutComponent = HOC(InputComponent)作为<WrapperComponent/>的输入传递，因为它需要包裹HOC，并且它是此布局的入口点：

如何通过HOC实现获得理想的结果？我知道这可以在没有HOC的情况下实现，但我特别想通过实现HOC来编写这个程序，因为<ChildComponents/>和<VerticalLayout/>的一些任务/代码将是相同的，也因为我想要练习写作HOCs。

Answer 1

不要重新发明轮子！它已经存在并准备好使用，请查看：https://github.com/acdlite/recompose/blob/master/docs/API.md#branch

基本上你将配置作为条件传递，围绕这些行的东西应该可以解决问题：

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

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

1 个答案: