react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
#课程目标
1.梳理react组件之间的关系
2.掌握父子传值的方法
3.掌握子父传值的方法
4.掌握嵌套组件传值方法 context
#知识点
1.组件和组件之间的关系 (1)父子 props (2)子父 回调函数 context (3)嵌套 props context (4)并列 redux mobx(公共数据管理仓库) 全局变量 (暂时不讲)
2.父子传值方式
父向子传值,父组件在子组件标签上写属性,子组件通过this.props接收
//子组件
class Son extends Component{
render(){
return <div>{this.props.name}</div>
}
}
//父组件
class Father extends Component{
state={
name:'张三'
}
render(){
return <div>
<Son name={this.state.name}/>
</div>
}
}
3.子父传值
子向父传值 是父组件向子组件传一个函数名字 子组件去调用,在调用函数时通过参数传给父组件
案例:子组件调用父组件方法弹出一个 hello
//子组件
class Son extends Component{
render(){
return <div onClick={()=>{this.props.printHello('hello')}}>点击弹出hello</div>
}
}
//父组件
class Father extends Component{
state={
name:'张三'
}
printHello=(content)=>{
alert(content)
}
render(){
return <div>
<Son name={this.state.name} printHello={this.printHello}/>
</div>
}
}
4.嵌套传值 嵌套组件传值和父子传值都可用 context
1.首先页面引入createContext,并结构出Provider组件和Consumer组件
import React,{createContext} from 'react'
const {Provider,Consumer} =createContext();
2
2.在根组件(需要提供数据或方法的组件)套上一个Provider, 把值赋给属性value 在接收数据或函数方法的组件上套上一个Consumer
//根组件
class One extends Component{
state={
name:'西瓜',
}
render(){
return <Provider value={this.state.name}>
<Two />
</Provider>
}
}
//中间组件
class Two extends Component{
render(){
return <div>
<Three />
</div>
}
}
//需要传值的组件
class Three extends Component{
render(){
return <Consumer>
{
(data)=>{
return <div>{data}</div>
}
}
</Consumer>
}
}
3.不同页面间 嵌套组件使用context 方法
//首先新建一个公共js 解构出一个Provider和Consumer并导出
import React,{createContext} from 'react'
const {Provider,Consumer} =createContext()
export {
Provider,Consumer
}
//在需要用这对组件的页面再分别引入Provider,Consumer
react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)的更多相关文章
- react第三单元(react组件的生命周期)
第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...
- react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标
第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- react第十六单元(redux的认识,redux相关api的掌握)
第十六单元(redux的认识,redux相关api的掌握) #课程目标 掌握组件化框架实现组件之间传参的几种方式,并了解两个没有任何关系组件之间通信的通点 了解为了解决上述通点诞生的flux架构 了解 ...
- 【前端框架-Vue-基础】$attr及$listeners实现跨多级组件的通信
父子 A 组件与 B 组件之间的通信: (父子组件) 如上图所示,A.B.C三个组件依次嵌套,按照 Vue 的开发习惯,父子组件通信可以通过以下方式实现: A to B 通过props的方式向子组件传 ...
- 个人永久性免费-Excel催化剂功能第67波-父子结构表转换添加辅助信息之子父关系篇
Excel作为一款数据领域的万物互联工具,连接一切外部的多种多样的数据源.将数据带到Excel的环境中,再进行数据处理.转换.统计分析等工作,是众多表哥表姐们每天都在经历的事情.能最快速将其他来源数据 ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
- React(7) --react父子组件传参
react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React f ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
随机推荐
- SHEIN:Java开发面经
SHEIN面经 我觉得除技术外,自信是一个非常关键的点. 一面 自我介绍: 谈谈实习经历: 讲讲你实习的收获: 如何设计规范的接口?(简历上有写,所以问到) 当你需要修改两个月前的代码时,如何去整理以 ...
- Ubuntu16.04安装搜狗输入法报错:dkpg:处理归档sogoupinyin.deb(--install)时出错,安装sogoupinyin将破坏fcitx-ui-qimpanel
系统:ubuntu16.04 事件:安装搜狗拼音时报错 报错信息(ubuntu语言是英文的报错信息): dpkg: regarding sogoupinyin_2.3.2.07_amd64-831.d ...
- Mac垃圾忘记清理?开启自动清理提醒帮助你!
Mac系统被广泛应用于各种职场生活和学习生活上,平时由于工作和学习忙碌,用户难免会忽略了对Mac的照料,Mac在日复一日地使用中,必定会逐渐变得"臃肿",系统中存在着各种文件缓存垃 ...
- 1、Go语言介绍
一 Go语言介绍 Go 即Golang,是Google公司2009年11月正式对外公开的一门编程语言. Go是静态强类型语言,是区别于解析型语言的编译型语言. 解析型语言--源代码是先翻译为中间代码, ...
- 牛客编程巅峰赛S2第4场
牛客编程巅峰赛S2第4场 牛牛摆玩偶 题目描述 牛牛有\(n(2 \leq n \leq 10^5)(2≤n≤105)\)个玩偶,牛牛打算把这n个玩偶摆在桌子上,桌子的形状的长条形的,可以看做一维数轴 ...
- C语言项目(一):学生信息管理系统
实现方式:链表 结构定义 1 typedef struct MyStu MyStudent; 2 typedef struct node Node; 3 typedef Node *pNode; 4 ...
- 「刷题笔记」LCA问题相关
板子 ll lg[40]; ll dep[N],fa[N][40]; ll dis[N]; void dfs(ll u,ll f) { dep[u]=dep[f]+1; fa[u][0]=f; for ...
- Netty 搭建 WebSocket 服务端
一.编码器.解码器 ... ... @Autowired private HttpRequestHandler httpRequestHandler; @Autowired private TextW ...
- Python中高级知识(非专题部分)学习随笔
Python学习随笔:使用xlwings读取和操作Execl文件 Python学习随笔:使用xlwings新建Execl文件和sheet的方法 博客地址:https://blog.csdn.net/L ...
- PHP代码审计分段讲解(10)
26 unserialize()序列化 <!-- 题目:http://web.jarvisoj.com:32768 --> <!-- index.php --> <?ph ...