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

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 作为 props 传递给 Home 因为 App 没有直接渲染 Home。您正在通过 React-Router 执行此操作。

这里有两种方法:

1. 使用状态管理解决方案，如 Redux 和 connect() Main 和 Home 到 用户 在店里。这样，user 就不是 Main 状态的一部分，而是应用商店的一部分，可以从其他组件访问。这是最复杂/可扩展的解决方案。
2. 使用Contexts .来自文档:在某些情况下，您希望通过组件树传递数据，而不必在每个级别手动传递 props。您可以使用强大的“上下文”API 在 React 中直接执行此操作。如果您想避免使用 Redux 或 Mobx 或任何状态管理，这可能是可行的方法。