React Hooks中使用useContext 进行父子组件传值

1、封装的公共文件

    import React, {createContext} from 'react';

    const CountContext = createContext();

    export default CountContext

2、父组件

import React, { useState } from 'react'
import Children from '../Children' 
import CountContext from '../cons/CountContext'

export default function Parent () {
    const [count, setCount] = useState(0)
        return (
            <div>
               <h2>我是父组件的：{count}</h2>
               <button onClick={()=>{setCount(count+1)}}>添加</button>
               <CountContext.Provider value={count}>
                    <Children />
               </CountContext.Provider>
            </div>
        )
}

子组件

import React from 'react'
import Grandson from '../Grandson'

export default function Children () {
        return (
            <div>
               <h3> 我是子组件</h3>
               <Grandson />
            </div>
        )
}

孙组件

import React, { useContext } from "react";
import CountContext from "../cons/CountContext";

export default function Grandson() {
  let count = useContext(CountContext);
  return (
      <h4> 我是孙组件:{count}</h4>
  );
}

隔着子组件，从父组件直接传值到孙组件。