7

下面是高阶组件。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)
}

这是将使用 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 problems occur)
    this.props.importantMethod()

    //do something with this components dispatch
    this.props.otherReduxAction()
  }

  render(){
    return <div>
      {this.doImportantThing()}
    </div> 
  }
}

let EnhancedComponent = withExtraStuff(ChildComponent)

let mapDispatchToProps = (dispatch)=>{
  return bindActionCreators({otherReduxAction}, dispatch)
}

export default connect(null, mapDispatchToProps, null, {pure: false})(EnhancedComponent)

问题发生mapDispatchToProps在我的 HOC 内部被孩子覆盖，并且动作创建者：importantReduxAction，永远不会被传递到我的 HOC 中。它收到以下错误：

方法未定义

我已经通过将方法传递给我的子组件来解决这个问题，如下所示：

/* CHILD COMPONENT DEFINITION ABOVE */

let mapDispatchToProps = (dispatch)=>{
  return bindActionCreators({otherReduxAction, importantReduxAction}, dispatch)
}

但这个解决方案并不是我真正想要的工作方式。有没有办法让我的 HOC 合并到它想要与包装组件的动作创建者一起使用的动作创建者中？还是我必须找到解决这个问题的新方法？

TLDR：使用动作创建者的 HOC 组件包装了也有一个的子组件。HOC 动作创建者被踢到遏制并且从未通过。

4

2 回答 2

3

看起来您的示例有问题。

function withExtraStuff (InnerComponent) {
  return class Enhancer extends React.Component {/* ... */}

  // ...

  return connect(/* ... */)(Enhancer)
}

你return从你的 HOC 中 ing 两次，所以你Enhancer永远不会被connect编辑。

这只是您示例中的错字吗？或者您的代码中是否有同样的问题？因为那确实会导致您看到的问题。

于 2018-02-19T21:23:33.467 回答
0

这里的问题是您需要将道具合并到高阶组件中。redux connect 接受第三个参数，它是一个函数（mergeProps）。这个函数接受三个参数。请参见此处的示例：

function mergeProps(stateProps, dispatchProps, ownProps) {
		return {
			...stateProps,
			...dispatchProps,
			...ownProps,
			actions: Object.assign({}, dispatchProps.actions, ownProps.actions)
		}
	}

在我的包装组件中，我像这样设置了 mapDispatchToProps：

function mapDispatchToProps(dispatch) {
	return {
	    actions: bindActionCreators({
	      ...myDefinedActionsForMyComponent,
	    }, dispatch)
	  }		
	}

在我的 HOC 中，我以同样的方式设置了我的 mapDispatchToProps。您遇到的问题可以通过在您的 HOC（高阶组件）中实现 mergeProps 来解决。如果您只是创建 mergeProps 函数并在控制台记录三个参数，您将看到这些值并可以决定如何最好地加入它们。根据我的设置，我只需对动作进行对象分配。你可能需要做类似的事情。

然后，连接在您的 HOC 中将如下所示：

return connect(mapStateToProps, mapDispatchToProps, mergeProps)(Wrapper)

于 2019-03-12T16:04:22.510 回答