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完成了这项工作。

你有两种方法：

使用状态管理解决方案，例如Redux和connect() Main和Home到商店中的user。这样，user不属于Main状态，而是应用商店的一部分，可以从其他组件访问。这是最复杂/可扩展的解决方案。
使用Contexts。从文档：在某些情况下，您希望通过组件树传递数据，而不必在每个级别手动传递道具。您可以使用强大的＆＃34; context＆＃34;直接在React中执行此操作。 API。如果您想避免使用Redux或Mobx或任何状态管理，这可能是最佳选择。

Answer 2

将父组件的状态发送为子组件的道具。在Parent组件中像这样获取子对象...

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

按this.props.user

访问子级中的用户

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

2 个答案: