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