104.《React中Context的使用》

最新推荐文章于 2021-10-24 17:35:31 发布

@逆风微笑代码狗

最新推荐文章于 2021-10-24 17:35:31 发布

阅读量88

点赞数

分类专栏：笔记文章标签： react

本文链接：https://blog.csdn.net/qq_44864082/article/details/118554882

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

Context跨越组件传值

import React from 'react';
 
const  { Provider,Consumer } = React.createContext() 
// 祖父 组件 向 孙组件 传值
class Pars extends React.Component {
    state = {
        num:0
    } 
    render() {
        return (
            <Provider value={this.state.num}>
                <div>
                    父组件：
                    <Ch1  /> 
                </div>
            </Provider>
        )
    }
} 
class Ch1 extends React.Component {
    render() {
        return (
            <div>
                兄弟一：
               <Ch2 />
            </div>
        )
    }
} 
class Ch2 extends React.Component { 
    render() {
        return (
            <div>
                兄弟二： 
                <Consumer>
                    {
                        data => <span>{data}</span>
                    }
                </Consumer>
            </div>
        )
    }
} 
export { 
    Pars
}