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();

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