访问道具与Redux状态数据一起发送到组件

Question

通常,您可以访问父项发送给子组件上的子项的道具.但是当在子组件上使用redux时,父级发送的道具会丢失,使用'connect'方法将redux状态映射到组件props.

例如:

声明具有属性的组件: <A_Component prop1='1' prop2='2' />

无需使用redux访问子组件,工作正常: this.props.prop1或this.props.prop2

undefined如果使用redux状态,则相同的语句将给出错误.

Answer 1

自己的组件道具可用作mapStateToProps函数的第二个参数:

// ParentComponent.js

// ... other component methods ...
render() {
  return <TodoContainer id="1" />
}

// TodoContainer.js

// `ownProps` variable contains own component props
function mapStateToProps(state, ownProps) {
  return {
    todo: state.todos[ownProps.id]
  };
}

Answer 2

react-redux connect方法将道具传递给包装的元素。connect方法可以接收3种方法：

• mapStateToProps -创建数据道具
• mapDispatchToProps -创建动作道具
• mergeProps -结合之前2种方法产生的道具，并添加父项分配道具（ownProps / parentProps）。

通常，您仅覆盖mapStateToProps和或mapDispatchToProps，并使用默认值mergeProps（defaultMergeProps）。

这是defaultMergeProps方法的定义：

const defaultMergeProps = (stateProps, dispatchProps, parentProps) => ({
  ...parentProps, // ownProps
  ...stateProps, // mapStateToProps
  ...dispatchProps // mapDispatchToProps
})

因此，除非您defaultMergeProps用自己的mergeProps方法覆盖，否则您将始终获得父级分配的道具。

顺便说一句-既mapStateToProps和mapDispatchToProps接收ownProps为好，这样他们就可以与国家它们合并，并创建新的数据道具/动作的道具。