访问道具以及Redux状态数据发送到组件

通常情况下，您可以访问父组件发送给子项目的道具。但是，当在子组件上使用redux时，由父节点发送的道具会丢失，并使用将redux状态与组件道具映射的“connect”方法。访问道具以及Redux状态数据发送到组件

如：

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

访问无子组件上的终极版，做工精细： this.props.prop1或this.props.prop2

相同的语句会给undefined错误，如果终极版状态是用过的。

来源

2016-08-09 Harshith J.V.

你能提供一些代码吗？ – Maxx

自己的组件道具可作为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] 
    }; 
}

来源

2016-08-09 09:05:10 1ven

太棒了！完美的作品。 :) –

反应-终极版connect method传递道具包裹元件。 connect方法可以接收3种方法：

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

通常只需要重写mapStateToProps和或mapDispatchToProps，并使用默认mergeProps（defaultMergeProps）。

这是defaultMergeProps方法的定义：

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

所以，除非你通过自己的mergeProps方法来覆盖defaultMergeProps，您总能获得由母公司分配的道具。

btw - mapStateToProps和mapDispatchToProps都会收到ownProps，所以他们可以将它们与状态相结合，并创建新的数据道具/动作道具。

来源

2016-08-09 09:45:06

访问道具以及Redux状态数据发送到组件

回答

相关问题