将道具传递给react-redux容器组件
问题描述:
我有一个在React Native Navigator组件中创建的react-redux容器组件。我希望能够将导航器作为道具传递给此容器组件,以便在其演示组件内按下按钮后,它可以将对象压入导航器堆栈。将道具传递给react-redux容器组件
我想要这样做,而不需要手工编写react-redux容器组件给我的所有样板代码(并且也不会错过所有反应的优化 - redux也会给我这里)。
例容器组件代码:
const mapStateToProps = (state) => {
return {
prop1: state.prop1,
prop2: state.prop2
}
}
const mapDispatchToProps = (dispatch) => {
return {
onSearchPressed: (e) => {
dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
}
}
}
const SearchViewContainer = connect(
mapStateToProps,
mapDispatchToProps
)(SearchView)
export default SearchViewContainer
而且我希望能够从我的导航renderScene
函数中调用这样的组件:
<SearchViewContainer navigator={navigator}/>
在集装箱上面的代码,我需要能够从mapDispatchToProps
函数中访问通过的prop。
我不喜欢在redux状态对象上存储导航器,并且不想将prop传递给表示组件。
有没有一种方法可以将道具传递给这个容器组件?或者,有没有其他方法可以忽略?
谢谢。
答
mapStateToProps
和mapDispatchToProps
都采取ownProps
作为第二个参数。
[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):
答
您可以在第二个参数传递给mapStateToProps(state, ownProps)
,这将给你访问传递到组件的道具mapStateToProps
答
如果使用的是装饰,下面的代码给你想要使用的装饰为您Redux的连接情况的一个例子。
@connect(
(state, ownProps) => {
return {
Foo: ownProps.Foo,
}
}
)
export default class Bar extends React.Component {
如果您现在检查this.props.Foo
你会看到,从使用了Bar
部件,其中添加的道具。
<Bar Foo={'Baz'} />
在这种情况下this.props.Foo
将字符串“巴兹”
希望这澄清了一些事情。
如何在mapDispatchToProps中访问它? – Michael
@Michael以同样的方式,你可以使用第二个参数 –