首页 文章

如何访问子组件中的父组件状态?

提问于
浏览
0

我在我的应用程序中使用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 回答

  • 5

    你的问题是,你不能只将 user 作为道具传递给 Home ,因为 App 不是直接渲染 Home . 你是通过 React-Router 做到的 .

    你有两种方法:

    • 使用状态管理解决方案,如 Reduxconnect() MainHome 到商店的 user . 这样, user 不是 Main 状态的一部分,而是app store的一部分,可以从其他组件访问 . 这是最复杂/可扩展的解决方案 .

    • 使用Contexts . 从文档:在某些情况下,您希望通过组件树传递数据,而不必在每个级别手动传递道具 . 您可以使用功能强大的"context" API在React中直接执行此操作 . 如果您想避免使用Redux或Mobx或任何状态管理,这可能是要走的路 .

  • 0

    将父组件的状态作为道具发送到子组件 . 在父组件内获取像这样的子...

    <Home user={this.state.user} />
    

    通过 this.props.user 访问孩子的用户

相关问题