前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react组件传值

react组件传值

作者头像
心念
发布2023-01-11 20:41:15
3400
发布2023-01-11 20:41:15
举报
文章被收录于专栏:前端心念前端心念

父传子

父组件通过props直接传给子组件

子传父

父元素通过props给子元素传递一个接收值的回调函数

跨级组件通信(爷孙)

1.逐层传递的props,爷-父-子。比较麻烦

2. React.createContext()Api

代码语言:javascript
复制
1context是一个全局变量,像是一个大容器,在任何地方都可以访问到。
2我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;
3但是React官方不建议使用大量context,尽管他可以减少逐层传递。
4但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;
5而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首.

3.redux/mobx

非嵌套组件通信(兄弟)

1.使用事件订阅 eventBus

2.redux/mobx

3.由公共父组件传递props,子-父-子,麻烦

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 父传子
  • 子传父
  • 跨级组件通信(爷孙)
  • 非嵌套组件通信(兄弟)
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档