六、react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参

1.梳理react组件之间的关系
2.掌握父子传值的方法
3.掌握子父传值的方法
4.掌握嵌套组件传值方法 context

//子组件
class Son extends Component{
    render(){
        return 
{this.props.name}
    }
}
//父组件
class Father extends Component{
    state={
        name:'张三'
    }
    render(){
        return 
            <Son name={this.state.name}/>
        

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.在根组件（需要提供数据或方法的组件）套上一个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

无语非说我质量有问题，凑个字数……

无语非说我质量有问题，凑个字数……

无语非说我质量有问题，凑个字数……

无语非说我质量有问题，凑个字数……

无语非说我质量有问题，凑个字数……