reactjs - 如何取出传递给 Hoc 函数的道具

Question

我写了一个withHoc.js，传递组件和wrappedComponent：

export const withHoc = ( WrappedComponent, Component ) => class WithHoc extends Component {
  ...
  render() {
    return (
      <WrappedComponent>
        <Component>
      </WrappedComponent>
    )
  }
}

withWrappedHoc.js并使用样式组件创建另一个：

const WrappedComponent = styled.div`
  ...
`
export const withWrappedHoc = (Component) => 
  withComponent(Component, WrappedComponent )

与withWrappedHoc相同withHoc，只是它用我自己的自定义替换 WrappedComponent。

标签： reactjsstyled-components

Answer 1

使用 curry 对这些 hoc 函数进行模式化可能很清楚，如下所示：

export const withHoc = ( WrappedComponent ) => (Component) => class WithHoc extends Component {
  ...
  render() {
    return (
      <WrappedComponent>
        <Component>
      </WrappedComponent>
    )
  }
};


const WrappedComponent = styled.div`
  ...
` 
export const withWrappedHoc = withhoc(WrappedComponent);