react hooks useContext实现父子组件通讯

父组件App.js

import React, { useState } from 'react'
import CountContext from './CountContext';//
import Counter from './Counter' //子组件

export default function App() {
  const [ count, setCount ] = useState(0)
  return (
    <div>
      <p>计数器值为： { count }</p>
      <button onClick={ () => setCount(count+1)}>点我加一</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  )
}

子组件 Counter.jsx

import React, { useContext } from 'react'
import CountContext from './CountContext'

export default function Counter() {
  let count = useContext(CountContext)
  return (
    <h2>{count}</h2>
  )
}

公共组件 CountContext.jsx

import { createContext } from "react";

const CountContext = createContext()
export default CountContext