我在我的应用程序中使用react-router(v3)进行路由 . 我有一些嵌套路由,并希望访问子组件中的父组件状态 .
Route:
<Route component={Main}>
<Route path="home" component={Home} />
</Route>
Main Component(parent):
export default class Main extends Component {
constructor(prop){
super(prop);
this.state = {
user : {}
}
}
render(){
return (
<div>
Main component
</div>
)
}
}
Home Component(child):
export default class Home extends Component {
constructor(prop){
super(prop);
}
render(){
return (
<div>
Main component
want to access user data here. how to access user from parent component?
</div>
)
}
}
在 Home
组件中,我想访问用户数据,即父组件 Main
. 有没有办法在子组件中访问父组件状态?
2 回答
你的问题是,你不能只将
user
作为道具传递给Home
,因为App
不是直接渲染Home
. 你是通过React-Router
做到的 .你有两种方法:
使用状态管理解决方案,如
Redux
和connect()
Main
和Home
到商店的user
. 这样,user
不是Main
状态的一部分,而是app store的一部分,可以从其他组件访问 . 这是最复杂/可扩展的解决方案 .使用Contexts . 从文档:在某些情况下,您希望通过组件树传递数据,而不必在每个级别手动传递道具 . 您可以使用功能强大的"context" API在React中直接执行此操作 . 如果您想避免使用Redux或Mobx或任何状态管理,这可能是要走的路 .
将父组件的状态作为道具发送到子组件 . 在父组件内获取像这样的子...
通过
this.props.user
访问孩子的用户