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

Question

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

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

并使用 styled-component 创建另一个 withWrappedHoc.js：

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

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

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);

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

How to take out the props passing to Hoc function

reactjs

styled-components