将数据传递给独立组件 React

Question

我有这个 HomeContainer 组件、Home 组件和这个 Header 组件。

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

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

问题 - 我想将数据发送到 Header，这样我就可以在 header 中更新城市，只要有人在输入字段中输入内容

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

谢谢

Answer 1

您的 jsx 结构类似于：

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

因为city属性要被<Header />和<HomeContainer />使用，所以不应该定义在<HomeContainer />

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

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

这样，<Header /> 和 </HomeContainer> 都将随着对 city 属性的更改进行更新