以下是高阶组件.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)