react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

时间:2021-11-17 13:49:35

第六单元(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