关于context:邂逅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;

分享结束 感激浏览