react Context 的使用及说明

使用

创建一个context  解构出来两个组件

Provider  //提供数据  可以有多个 Consumer会就近访问

Consumer //消费数据 也可以有多个 

import React from 'react'
const {Provider,Consumer}= React.createContext()
class Parents extends React.Component{
    state={
        msg:"测试嵌套组件"
    }
    render(){
        return(
            <Provider value={this.state.msg}>
                <div>
                    <h1>父组件</h1>
                    <button onClick={()=>this.text()} type="button">button</button>
                    <Child />
                </div>
            </Provider>
        )
    }
    text(){
        this.setState({
            msg:"改变数据啊"
        })
    }
}
class Child extends React.Component{
    render(){
        return(
            <Consumer>
                {
                    msg=><div><h1>传递的数据---{msg}</h1></div>
                }
            </Consumer>
        )
    }
}
export default Parents;