邂逅react(十二) 组件通信之context

关于context概念解释起来很绕,很多功能也不常用,就简单解释一下最常用的方法

react中跨组件通信可以通过props逐层传递或者context创建对象进行数据传递,const name=React.createContext('name')再通过订阅取值

上代码~~~

//创建context对象
const MyContext=React.createContext('getText')

//根组件
class ContextCom extends Component {
    state = { 
        name:'我是大白白',
        level:999,
        content:'你好~~~~我是子组件2'
     }
    render() { 
        return ( 
            

              {/* 订阅context 给state赋值 */}
               
                   
               
                
            
         );
    }
}
//父组件
class Page extends Component {
    state = {  }
    render() { 
       
        return ( 
            
 
                

                    类子组件
                    
                
            
              
               

                   函数子组件
                   
               
               
我是内容~~~~
            
         );
    }
}

//子组件1 类组件
class PageHead extends Component {
    state = {  }
    render() { 
        console.log(this.context)
        return ( 
            

                
name:{this.context.name}
                
level:{this.context.level}
            
         );
    }
}
//给PageHead的contextType赋值 
PageHead.contextType=MyContext

//子组件2 函数组件
function Content(){
    return(
        //函数组件 取值用 Consumer
        
            {
                value=>{
                    return(
                        // **注意 函数组件中取值为 value.
                        
内容：{value.content}
                    )
                   
                }
            }
        
    )
}
 
export default ContextCom;

分享完毕 感谢阅读