react useContext跨层级组件传值

码林鼠

已于 2023-12-29 17:18:25 修改

阅读量431

点赞数 1

分类专栏： react 文章标签：自动化 python javascript

于 2021-06-21 17:49:43 首次发布

本文链接：https://blog.csdn.net/weixin_41254345/article/details/118091627

版权

react 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该博客探讨了React中使用上下文API（Context API）进行组件间通信的两个示例。在案例一中，父组件通过ContextComp创建了一个Context，并在子组件ItemComp中使用useContext来获取并显示Context中的名字。案例二展示了如何在GrandSon组件中通过MyContext从父组件和孙子组件之间传递数据。

摘要由CSDN通过智能技术生成

案例一

父组件

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>
    )
  }