第六单元(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();
1
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方式的传参)的更多相关文章

  1. react第三单元(react组件的生命周期)

    第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...

  2. react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标

    第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...

  3. react第二十单元(react+react-router-dom+redux综合案例2)

    第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业

  4. react第十六单元(redux的认识,redux相关api的掌握)

    第十六单元(redux的认识,redux相关api的掌握) #课程目标 掌握组件化框架实现组件之间传参的几种方式,并了解两个没有任何关系组件之间通信的通点 了解为了解决上述通点诞生的flux架构 了解 ...

  5. 【前端框架-Vue-基础】$attr及$listeners实现跨多级组件的通信

    父子 A 组件与 B 组件之间的通信: (父子组件) 如上图所示,A.B.C三个组件依次嵌套,按照 Vue 的开发习惯,父子组件通信可以通过以下方式实现: A to B 通过props的方式向子组件传 ...

  6. 个人永久性免费-Excel催化剂功能第67波-父子结构表转换添加辅助信息之子父关系篇

    Excel作为一款数据领域的万物互联工具,连接一切外部的多种多样的数据源.将数据带到Excel的环境中,再进行数据处理.转换.统计分析等工作,是众多表哥表姐们每天都在经历的事情.能最快速将其他来源数据 ...

  7. React 学习(六) ---- 父子组件之间的通信

    当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...

  8. React(7) --react父子组件传参

    react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React f ...

  9. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

随机推荐

  1. SHEIN:Java开发面经

    SHEIN面经 我觉得除技术外,自信是一个非常关键的点. 一面 自我介绍: 谈谈实习经历: 讲讲你实习的收获: 如何设计规范的接口?(简历上有写,所以问到) 当你需要修改两个月前的代码时,如何去整理以 ...

  2. Ubuntu16.04安装搜狗输入法报错:dkpg:处理归档sogoupinyin.deb(--install)时出错,安装sogoupinyin将破坏fcitx-ui-qimpanel

    系统:ubuntu16.04 事件:安装搜狗拼音时报错 报错信息(ubuntu语言是英文的报错信息): dpkg: regarding sogoupinyin_2.3.2.07_amd64-831.d ...

  3. Mac垃圾忘记清理?开启自动清理提醒帮助你!

    Mac系统被广泛应用于各种职场生活和学习生活上,平时由于工作和学习忙碌,用户难免会忽略了对Mac的照料,Mac在日复一日地使用中,必定会逐渐变得"臃肿",系统中存在着各种文件缓存垃 ...

  4. 1、Go语言介绍

    一 Go语言介绍 Go 即Golang,是Google公司2009年11月正式对外公开的一门编程语言. Go是静态强类型语言,是区别于解析型语言的编译型语言. 解析型语言--源代码是先翻译为中间代码, ...

  5. 牛客编程巅峰赛S2第4场

    牛客编程巅峰赛S2第4场 牛牛摆玩偶 题目描述 牛牛有\(n(2 \leq n \leq 10^5)(2≤n≤105)\)个玩偶,牛牛打算把这n个玩偶摆在桌子上,桌子的形状的长条形的,可以看做一维数轴 ...

  6. C语言项目(一):学生信息管理系统

    实现方式:链表 结构定义 1 typedef struct MyStu MyStudent; 2 typedef struct node Node; 3 typedef Node *pNode; 4 ...

  7. 「刷题笔记」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 ...

  8. Netty 搭建 WebSocket 服务端

    一.编码器.解码器 ... ... @Autowired private HttpRequestHandler httpRequestHandler; @Autowired private TextW ...

  9. Python中高级知识(非专题部分)学习随笔

    Python学习随笔:使用xlwings读取和操作Execl文件 Python学习随笔:使用xlwings新建Execl文件和sheet的方法 博客地址:https://blog.csdn.net/L ...

  10. PHP代码审计分段讲解(10)

    26 unserialize()序列化 <!-- 题目:http://web.jarvisoj.com:32768 --> <!-- index.php --> <?ph ...