useContext实现组件间的通信

1.父组件中

创建myContext对象，myContext对象返回一个Provider React组件，接收value属性传递给子组件

import { createContext, useState } from 'react';

export const myContext = createContext(null);//初始值为null

const Parent = () => {
    const [count,setCount] = useState(0);

    return (
        <button onClick={() => {setCount(count+1)}}>click me</button>
        <myContext.Provider value={count}>
            <Child />
        </myContext.Provider>
    )
}

export default Parent;

2.子组件中

import { useContext } from 'react';
import { myContext } from './Parent';

const Child = () => {
    let count = useContext(myContext);
    return (
        <h2>count</h2>
    )
}        

export default Child;