Question

通常，您可以访问父级发送给子组件上的子级的道具。但是当在儿童组件上使用redux时，父母发送的道具会因使用“连接”而丢失。将redux状态与组件props映射的方法。

E.g：

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

在没有redux的情况下访问子组件，工作正常： this.props.prop1或this.props.prop2

如果使用redux状态，相同的语句将给出undefined错误。

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 method将道具传递给被包裹的元素。 connect方法可以接收3种方法：

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

通常您只覆盖mapStateToProps和/ mapDispatchToProps，并使用默认mergeProps（defaultMergeProps）。

这是defaultMergeProps方法的定义：

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

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

btw - mapStateToProps和mapDispatchToProps都接收ownProps，因此他们可以将它们与状态结合起来，并创建新的数据道具/动作道具。

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

2 个答案: