reactjs - 如何使用柯里化(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(...) is not a function

顺便说一句，如果我不使用柯里化(Currying)创建临时，它会起作用，如下所示:

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

和

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

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

它有效。但是如何在 React 中使用柯里化(Currying)创建 HoC 并同时使用 Redux？

Answer 1

柯里化(Currying) HOC 没有什么问题。以下是有效的高阶组件

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

您的问题是撰写。最右边的参数将为生成的组合函数提供签名，实际上是对另一个 HOC 求值，而不是组件本身。

<小时/>

您应该连接返回的组件

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

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

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

只是不是那么漂亮