Question

如果我们在调用组件时传递prop以及map状态为props会发生什么情况

<Modal foo={1} ... />

const Modal = ({ foo, ... }) => {
     console.log(foo) // 1 or 2 ? and Why ? is it random ?
}

export default connect(
    (state) => ({
        foo: state.foo, // let's say the value in the reducer is 2
        ...
    })
)(Modal)

有规则还是随机的？

Answer 1

connect是一个HOC，它将从mapStateToProps和mapDispatchToProps接收的值传递给组件。

从mapStateToProps，mapDispatchToProps传递的值将覆盖传递给组件的道具。

因此，在上述情况下，console.log({foo})将记录2。

为更好地理解它，您可能会想到Component中使用了connect like

<Component {...ownProps} {...valuesFromConnectArgs} />

您还可以查看connect code from react redux，它具有以下合并mergeProps的方法

export function defaultMergeProps(stateProps, dispatchProps, ownProps) {
  return { ...ownProps, ...stateProps, ...dispatchProps }
}

您可以看看demo here

与道具冲突

1 个答案: