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

我在应用程序中使用react路由器（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>
    )
  }
}

主要组件（父级）：

<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>
    )
  }
}

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：{}
}
}
render（）{
返回(
主要成分
)
}
}

主组件（子组件）：

<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>
    )
  }
}

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
主要成分
要在此处访问用户数据。如何从父组件访问用户？
)
}
}

---

在

Home

组件中，我想访问用户数据，即在父组件

Main

中。有没有办法访问子组件中的父组件状态？

您的问题是，您不能将

用户

作为道具传递到

主页

，因为

应用程序

不会直接渲染

主页

。您可以通过

React路由器

实现这一点

这里有两种方法：

使用状态管理解决方案，如

Redux

和

connect（）。这样，
user
就不是
Main
状态的一部分，而是应用商店的一部分，可以从其他组件访问。这是最复杂/可扩展的解决方案

使用。从文档：在某些情况下，您希望通过组件树传递数据，而不必在每个级别手动传递道具。您可以使用功能强大的“上下文”API直接执行此操作。如果您想避免使用Redux或Mobx或任何状态管理，这可能是一种方法

---

您的问题是，您不能将

用户

作为道具传递到

主页

，因为

应用程序

不会直接呈现

主页

。您可以通过

React路由器

实现这一点

这里有两种方法：

使用状态管理解决方案，如

Redux

和

connect（）。这样，
user
就不是
Main
状态的一部分，而是应用商店的一部分，可以从其他组件访问。这是最复杂/可扩展的解决方案

使用。从文档：在某些情况下，您希望通过组件树传递数据，而不必在每个级别手动传递道具。您可以使用功能强大的“上下文”API直接执行此操作。如果您想避免使用Redux或Mobx或任何状态管理，这可能是一种方法

---

将父组件的状态作为道具发送给子组件。 在父组件中，像这样获取子组件

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

---

通过

this.props.user访问子组件中的用户

将父组件的状态作为props发送给子组件。 在父组件中，像这样获取子组件

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

---

通过

this.props.user

访问child中的用户正确的方法是将

state

作为

props

传递到主组件或父组件中，您可以创建一个函数，如

addUser

，它将执行所需的

setState

，然后将该函数作为

props

传递给子组件。正确的方法是将

state

作为

props

传递给主组件或父组件，您可以创建一个类似于

addUser

的函数，该函数将执行所需的

setState

，然后将该函数作为

props

传递给子组件。上下文-正是我所寻找的！上下文-正是我要找的！