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

Question

我使用的反应路由器(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状态的一部分，而是应用程序存储的一部分，可以从其他组件访问。这是最复杂/最可扩展的解决方案。
2. 使用语境。在某些情况下，您希望通过组件树传递数据，而不必在每个级别手动传递支持。您可以在与强大的“上下文”API作出反应时直接这样做。如果您想避免使用Redux或Mobx或任何状态管理，这可能是最好的方法。

Answer 2

将父组件的状态作为支持发送到子组件。在父组件中获取这样的子组件..。

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

通过this.props.user访问子级用户