react useContext跨层级组件传值

案例一

• 父组件

import ContextComp,{TestContext} from './components/ContextComp'
function App(){
  const showName = (name) => {
    console.log(name)
  }
  const ItemComp = () => {
    const {name} = React.useContext(TestContext)
    return <div onClick={() => {showName(name)}}>{name}</div>
  }
  return(
    <div>
      <ContextComp>
        <ItemComp></ItemComp>
      </ContextComp>
    </div>
  )
}

• 子组件

import React from 'react'
export const TestContext = React.createContext({})
function ContextComp(props){
  let list = ['ma','lin','shu']
  return (
    <div>
      {
        list.map((item,index) => <div>
          <TestContext.Provider
            value={{name:item}}
          >
            {props.children}
          </TestContext.Provider>
        </div>)
      }
    </div>
  )
}
export default ContextComp

案例二

import {  createContext, useContext } from 'react'
<div className="test_div">
        <MyContext.Provider value={msgObj}>
        	testDiv<Son></Son>
        </MyContext.Provider>
</div>
  const GrandSon = () => {

    const msgObj = useContext(MyContext)
    return (
      <div className='grand_son_comp'>grand_son_comp{msgObj.name}</div>
    )
  }

  const Son = () => {
    return (
      <div className='son_comp'>son_comp<GrandSon></GrandSon></div>
    )
  }