react使用context机制，跨层传参数

 1.利用createContext创建一个上下文对象

2.在顶层组件 通过Provider组件提供数据 value传的就是提供的数据

3.在底层组件使用钩子函数useContext（）消费数据

import { createContext, useContext } from "react"

// 1.利用createContext创建一个上下文对象
const msgCreateContext = createContext()

function A(){
    return (<>
    <div>我是A组件</div>
        <B/>
    </>)
}


function B(){
    // 3.在底层组件使用钩子函数useContext（）消费数据
    const msg = useContext(msgCreateContext)
    return (<>

        <div>我是B组件</div>
        <div>{msg}</div>
    </>)
}





function App(){
    const msg = "来自父组件，想要传给B组件的消息"
    return (<>
    {/* 2.在顶层组件 通过Provider组件提供数据 value传的就是提供的数据 */}
    <msgCreateContext.Provider value={msg}>
    <div>我是父组件</div>
        <A/>
    </msgCreateContext.Provider>
    
    </>)
}



export default App