邂逅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 ( 
            <div>
              {/* 订阅context 给state赋值 */}
               <MyContext.Provider value={this.state}>
                   <Page/>
               </MyContext.Provider>
                
            </div>
         );
    }
}
//父组件
class Page extends Component {
    state = {  }
    render() { 
       
        return ( 
            <div> 
                <div>
                    类子组件
                    <PageHead/>
                </div>            
              
               <div>
                   函数子组件
                   <Content/>
               </div>
               <div>我是内容~~~~</div>
            </div>
         );
    }
}

//子组件1 类组件
class PageHead extends Component {
    state = {  }
    render() { 
        console.log(this.context)
        return ( 
            <div>
                <h2>name:{this.context.name}</h2>
                <h2>level:{this.context.level}</h2>
            </div>
         );
    }
}
//给PageHead的contextType赋值 
PageHead.contextType=MyContext

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

分享完毕 感谢阅读