小编Jam*_*ick的帖子

高阶组件redux调度被包装组件redux调度覆盖

以下是高阶组件.HOC专门连接到redux以访问其中一个动作创建者:importantReduxAction.

function withExtraStuff (InnerComponent) {
  return class Enhancer extends React.Component {
    constructor(props){
      super(props)
      this.importantMethod = this.importantMethod.bind(this)
    }

    importantMethod(){
      //try to call the higher order component's action creator
      this.props.importantReduxAction()
    }

    render(){
      return <InnerComponent
        {...this.props}
        importantMethod={this.importantMethod}
      />
    }
  }

  let mapDispatchToProps = (dispatch)=>{
    return bindActionCreators({importantReduxAction}, dispatch)
  }
  return connect(null, mapDispatchToProps, null, {pure: false})(Enhancer)
}
Run Code Online (Sandbox Code Playgroud)

这是将使用HOC组件的包装组件.它还将自身连接到redux以获得对不同方法的访问:otherReduxAction.

class ChildComponent extends React.Component {
  constructor(props){
    super(props)
    this.doImportantThing = this.doImportantThing.bind(this)
  }

  doImportantThing(){
    //try to call the higher order component's method (this is where …
Run Code Online (Sandbox Code Playgroud)

reactjs redux react-redux es6-class higher-order-components

7
推荐指数
1
解决办法
680
查看次数