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

Question

我在我的应用程序中使用react-router(v3)进行路由.我有一些嵌套路由,并希望访问子组件中的父组件状态.

路线:

<Route component={Main}>
   <Route path="home" component={Home} />
</Route>

主要组成部分(父母):

export default class Main extends Component {
  constructor(prop){
    super(prop);
    this.state = {
      user : {}
    }
  }

  render(){
    return (
      <div>
        Main component
      </div>
    )
  }
}

家庭组件(儿童):

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.有没有办法在子组件中访问父组件状态？

Answer 1

你的问题是你不能只是user作为道具传递,Home因为App不是直接渲染Home.你这样做了React-Router.

你有两种方法:

1. 使用类似的状态管理解决方案Redux,并connect()都Main和Home到user在商店.这样,user不是Main状态的一部分,而是app store的一部分,可以从其他组件访问.这是最复杂/可扩展的解决方案.
2. 使用上下文.从文档:在某些情况下,您希望通过组件树传递数据,而不必在每个级别手动传递道具.您可以使用功能强大的"上下文"API直接在React中执行此操作.如果您想避免使用Redux或Mobx或任何状态管理,这可能是要走的路.