用法1

import React,{ Component, createContext } from "react";

//得到一个context 对象
// const Context = createContext()
const { Provider, Consumer } = createContext()

export default class Father extends Component {
    constructor() {
        super()
        this.state = {
            msg: '字符串',
            number: 10
        }
    }

    //修改msg
    changeMsg = ()=> {
        this.setState({
            msg:'修改后的字符'
        })
    }

    render() {

        let val = {
            msg: this.state.msg,
            number: this.state.number,
            changeMsg:this.changeMsg
        }

        return (

            //value属性 就放你要共享出去的数据
            <Provider value={val}>
                <div>
                    <p>Father 组件</p>
                    <Child1></Child1>
                </div>
            </Provider>

        )
    }
}


class Child1 extends Component {
    render() {
        return (
            <div>
                <p>Child1组件</p>
                <Child2></Child2>
            </div>
        )
    }

}


class Child2 extends Component {
    render() {
        return (

            // 使用数据
            <Consumer>
                {(value) => {
                    return(
                        <div>
                            <p>Child2组件</p>
                            <h2>//使用数据</h2>
                            <p>共享出来的数据msg:{value.msg}</p>
                            <p>共享出来的数据num:{value.number}</p>
                            {/* ()=> {value.changeMsg()} 写成箭头函数 可以传参 */}
                            <button onClick={()=> {value.changeMsg()}}>修改父组件数据</button>
                        </div>
                    )

                }}
            </Consumer>

        )
    }

}

用法2

 import React, { Component, createContext } from "react";

//得到一个context 对象
const Context = createContext()

export default class Father extends Component {
    constructor() {
        super()
        this.state = {
            msg: '字符串',
            number: 10
        }
    }

    //修改msg
    changeMsg = () => {
        this.setState({
            msg: '第二种方法修改'
        })
    }

    render() {

        let val = {
            msg: this.state.msg,
            number: this.state.number,
            changeMsg: this.changeMsg
        }

        return (

            //value属性 就放你要共享出去的数据
            <Context.Provider value={val}>
                <div>
                    <p>Father 组件</p>
                    <Child1></Child1>
                </div>
            </Context.Provider>

        )
    }
}

class Child1 extends Component {
    render() {
        return (
            <div>
                <p>Child1组件</p>
                <Child2></Child2>
            </div>
        )
    }

}

class Child2 extends Component {
    render() {
        return (
            <div>
                <p>Child2组件</p>
                <h2>//使用数据</h2>
                <p>共享出来的数据msg:{this.context.msg}</p>
                <p>共享出来的数据num:{this.context.number}</p>
                {/* ()=> {value.changeMsg()} 写成箭头函数 可以传参 */}
                <button onClick={() => { this.context.changeMsg() }}>修改父组件数据</button>
            </div>

        )
    }

}

//contextType react里面自带的
Child2.contextType = Context

用法3

// 函数式组件
import { Component, createContext, useState, useEffect,useContext } from "react";

//得到一个context 对象
const MyContext = createContext();


const Father = () => {
    //const [msg,serMsg] = useState(); 的完整写法
    // const a = useState();
    // const msg = a[0];
    // const serMsg = a[1];

    //以上可以简写为以下 写法
    const [msg, setMsg] = useState('我是父元素的数据');     //结构 赋值
    const [num, SetNum] = useState('我是父组件的数据');
    const changeMsg = () => {
        setMsg('新的数据')
    }

    const val = {
        msg,
        num,
        changeMsg,
    }

    return (
        //value属性 就放你要共享出去的数据
        <MyContext.Provider value={val}>
            <div>
                <p>Father 组件</p>
                <Child1></Child1>
            </div>
        </MyContext.Provider>
    )
}


const Child1 = () => {
    return (
        <div>
            <p>Child1组件</p>
            <Child2></Child2>
        </div>
    )
}

const Child2 = () => {
    const value = useContext(MyContext);
    return (
        <div>
            <p>Child2组件</p>
            <h2>//使用数据</h2>
            <p>共享出来的数据msg:{value.msg}</p>
            <p>共享出来的数据num:{value.number}</p>
            {/* ()=> {value.changeMsg()} 写成箭头函数 可以传参 */}
            <button onClick={() => { value.changeMsg() }}>修改父组件数据</button>
        </div>
    )
}

export default Father