如何取出传递给Hoc功能的道具

Question

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

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。

Answer 1

使用咖喱将这些特殊功能图案化可能非常清楚：

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


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