React中使用context实现跨层组件通信

function A() {
    return (<>
        This is A component
    </>)
}

function B() {
    let msg = useContext(MsgContext);

    return (<>
       This is B component::::  {msg}
    </>)
}
const MsgContext = createContext();
function App() {
    const msg = 'This is app msg';
    return (<>
        <MsgContext.Provider value={msg}>
            this is App
            <A/>
            <B/>
        </MsgContext.Provider>
    </>)
}


export default App;