将数据传递给独立组件React
阿罗拉
我有这个HomeContainer组成Home部分，这个Header组成部分和这个组成部分。
HomeContainer包含state of city和<Home city={this.props.city} />Home包含无状态函数并包含JSX。所以通过this.props我可以访问HomeContainer's city
问题-我想将数据发送到，Header以便每当有人在输入字段中输入内容时我可以更新标题中的城市
我认为该Main组件可以访问子组件，但是该Main组件是通过路由调用的，所以我无法弄清楚。
谢谢
分
您具有类似于以下内容的jsx结构：
<Main>
<Header />
<HomeContainer />
</Main>
由于该city属性将由<Header />和同时使用<HomeContainer />，因此不应在中定义<HomeContainer />
city相反，应将其定义为in的状态，<Main />并向下传递给<Header />和<HomeContainer />
这意味着您还需要将回调定义为changeCity()in<Main />并将其向下传递<HomeContainer />给prop。
这样，两者<Header />和</HomeContainer>都会随着city属性的更改而更新
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
无法将数据传递给方法
- 2
将额外的数据传递给函数
- 3
将数据传递给Laravel事件
- 4
将openpyxl数据传递给熊猫
- 5
React-将jSON数据传递给子组件的子组件
- 6
将数据传递到React Native中的组件？
- 7
将变量数据传递给ValidationAttribute
- 8
如何将数据传递给正在重用的组件？
- 9
将数据传递给lodash map（）函数-功能组件
- 10
使用React钩子将数据传递到同级组件？
- 11
将数据传递给createApp（vue）
- 12
Angular服务将数据传递给组件
- 13
Flutter：将数据传递给状态
- 14
如何在将父级的fetch调用中的数据传递给它之前停止React子级组件的加载
- 15
Titanium将数据传递给createHTTPClient
- 16
将数据传递给AsynTask
- 17
使用kefirjs将数据传递到React组件
- 18
无法将数据传递给AngularJS组件指令
- 19
将数据传递给服务-Android？
- 20
reactJs-将数据传递给嵌套组件
- 21
infernojs将数据传递给父组件
- 22
将数据传递给javascript图表
- 23
将数据传递给支持的节点
- 24
将数据传递给 taghelper
- 25
React 将获取的数据传递给另一个组件
- 26
Vue 如何将子组件和父组件数据传递给方法
- 27
将数据传递给父组件
- 28
使用 props 将子组件数据传递给父组件
- 29
如何将数据传递给组件到另一个组件
我来说两句