基于上下文方案实现祖先和后代的通信「类组件」和「函数组件」

1.上下文「类组件」

1.创建一个上下文

import React from "react"
const ThemeContext = React.createContext()
export default ThemeContext

2.父组件

import React, {Component} from 'react';
import ThemeContext from "./ThemeContext";
import Son from "./Son"
class Parent extends Component {
     state = {
         num:0,
         num1:1
     }
     change = ()=>{
     
       console.log("点击了")
     
     }
    render() {
         const {num,num1} = this.state
        return (
            <ThemeContext.Provider value={{num,num1,change:this.change}}>
                <div>
                    {/*后代组件*/}
                    <Son></Son>
                </div>
            </ThemeContext.Provider>

        );
    }
}

export default Parent;

3.获取数据

import React, {Component} from 'react';
import ThemeContext from "./ThemeContext";
//方法一
// class Son extends Component {
//     render() {
//         return (
//             <ThemeContext.Consumer>
//                 {
//                     (context)=>{
//                         let {num,num1,change} = context
//                         return (
//                             <>
//                                 <div>{num}</div>
//                                 <div>{num1}</div>
//                                 <button onClick={()=>change()}>点击</button>
//                             </>
//
//                         )
//                     }
//                 }
//             </ThemeContext.Consumer>
//
//         );
//     }
// }
// 方法二
class Son extends Component {
    static contextType = ThemeContext
    render() {
        let {num,num1,change} = this.context
        return (
            <>
                <div>{num}</div>
                <div>{num1}</div>
                <button onClick={()=>change()}>点击</button>
            </>

        );
    }
}
export default Son;

2.上下文「函数组件」

1. 父组件

const Parent = function (){
         const [num,setNum] = useState(0)
         const [num1,setNum1] = useState(10)
         const change = ()=>{
           console.log("点击了")
          }
            return (
            <ThemeContext.Provider value={{num,num1,change}}>
                <div>
                    {/*后代组件*/}
                    <Son></Son>
                </div>
            </ThemeContext.Provider>

        );
}
export default Parent;

2.子组件使用

import React, {Component} from 'react';
import ThemeContext from "./ThemeContext";
// 方法一
// const Son = function (){
//     const {change,num,num1} = useContext(ThemeContext)
//             return (
//             <>
//                 <div>{num}</div>
//                 <div>{num1}</div>
//                 <button onClick={()=>change()}>点击</button>
//             </>
//
//         );
// }

// 方法二
const Son = function (){

    return (
        <ThemeContext.Consumer>
            {
                (context)=>{
                    let {num,num1,change} = context
                    return <div>
                        <div>{num}</div>
                        <div>{num1}</div>
                        <button onClick={()=>change()}>点击</button>
                    </div>
                }
            }

        </ThemeContext.Consumer>

    );
}
export default Son;