react中使用Context实现跨层级组件传递数据

演示demo如下：

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

//创建Context组件，ContextDemo是自己随便命名的，不是固定写法
const ContextDemo = React.createContext(); 

export default class ChiDemo extends Component{ 
    constructor(){
        super()
        this.state = {
            value:"我是 爷爷组件 传递给 孙组件 的数据"
        }
    }
    render(){
        return(
            <div>
                我是爷爷组件
                <ContextDemo.Provider value={this.state.value}>
                    <ChiDemo1/>
                </ContextDemo.Provider>
            </div>
        )
    }
}

class ChiDemo1 extends Component{
    render(){
        return(
            <div>
                我是爸爸组件
                <ChiDemo2/>
            </div>
        )
    }
}

class ChiDemo2 extends Component{
    static contextType = ContextDemo; //接受爷爷组件传递过来的数据
    render(){
        return(
            <div>
                我是儿子组件（相对爷爷组件，我是孙组件）
                <div>{this.context}</div> 
            </div>
        )
    }
}

ReactDOM.render(<ChiDemo/>,document.getElementById("root"));

实现方法非常简单，主要关注以下几点即可：

1. 创建Context组件

const ContextDemo = React.createContext();

---

2.通过以下方式把数据传递过去

<ContextDemo.Provider value={this.state.value}>
    <ChiDemo1/>
</ContextDemo.Provider>

是这个组件的子组件，必须被包裹在这个Context组件里面，不然数据传不过去

---

3. 接收数据，通过一个contextType的静态方法进行接收， { this.context }渲染传递过来的数据

 static contextType = ContextDemo;

{this.context}