如何使用currying在React中创建HoC并同时连接到Redux存储？

Question

我将React和Redux与结合使用react-redux，并且在React中创建了一个我想连接到Redux存储的高阶组件，如下所示：

const HoC = parameter => WrappedComponent => 
    return class WithSelected extends Component {

    // ..some use of 'parameter'

    render() { 

         return <WrappedComponent />

     }

  [...]

  const exportComponent = compose(
      connect(mapStateToProps),
      HoC
   )

 export default exportComponent;

和

import Component from '../Component'
import exportComponent from '../file'

const componentToExport = exportComponent('someValue')(Component);

现在，这种方法会产生以下错误：

TypeError：Object（...）不是一个函数

顺便说一句，如果我不使用currying创建Hoc，它的工作原理如下：

const HoC = (parameter, WrappedComponent)  => [etc]

和

import Component from '../Component'
import exportComponent from '../file'

const componentToExport = exportComponent('someValue', Component);

有用。但是我该如何在React中使用currying创建HoC并同时使用Redux？

Answer 1

招揽任何人没有错HOC。以下是有效的高阶成分

const withHoc = param => Component => props =>{
  return <Component {...props} foo={param} />
}

你的问题是compose。您最右边的参数将提供结果组合函数的签名，实际上是在评估另一个HOC而不是组件本身。

您应该connect返回的组件

const HoC = parameter => WrappedComponent => connect(...)(props =>{
    /*...*/
})

返回基于类的组件与返回功能性组件相同

const HoC = parameter => WrappedComponent => connect(...)(class X extends Component{
    render(){ return <div /> }
})

只是不是那么漂亮