将数据传递给独立组件反应

Question

我有这个HomeContainer组件，Home组件和此Header组件。

1. HomeContainer包含state of city和<Home city={this.props.city} />

2. Home包含无状态函数并包含JSX。所以通过this.props我可以访问HomeContainer's city

问题 - 我想将数据发送到Header，以便每当有人在输入字段中输入内容时我都可以在标题中更新城市

我认为Main组件可以访问子组件，但Main组件是通过路由调用的，所以我无法弄清楚这一点。

由于

Answer 1

你有一个类似于：

的jsx结构

<Main>
  <Header />
  <HomeContainer />
</Main>

由于city和<Header />都要使用<HomeContainer />属性，因此不应在<HomeContainer />中定义

city应该被定义为<Main />中的状态，并传递给<Header />和<HomeContainer />

这意味着您还要在changeCity()中定义<Main />的回调，并将其作为道具传递给<HomeContainer />。

这样，<Header />和</HomeContainer>都会随着city属性的更改而更新