useContext的使用

話不多說，用代碼說話
useContext主要用於函數組件之間傳值的問題

1.首先要進行導入createContext,useContext
import React,{useState,createContext,useContext} from 'react'
function Child(){
//在子組件中使用useContext進行接收父組件傳遞的上下文，這樣值就能傳遞過來了
    const count1=useContext(CountContext)
    return (
        <h1>{count1}</h1>
    )
}
const CountContext=createContext()//首先創建一個上下文全局變量
function Example3(){
    const [count,setCount]=useState(0)

    function handleClick(){
        setCount(count+1)
    }
   
    return (
        <div>
            點擊{count}
            <button onClick={handleClick}>clickme</button>
            其次是作爲父組件將值傳遞過去，Provider 相當於提供者，Child是子組件
            <CountContext.Provider value={count}>
                <Child></Child>
            </CountContext.Provider>
        </div>
    )
}
export default Example3