react之useContext

1. src文件夹下新建ctx/index.jsx

复制代码
import { createContext } from 'react'

const Ctx = createContext({
  name: '',
  age: ''
})

export default Ctx

2. 在提供数据的组件使用Ctx.Provider组件包裹要接收数据的组件,并使用value值提供数据

复制代码
import A from './A'
import Ctx from './ctx'
function App() {
  return (
    <Ctx.Provider value={{ name: '张三', age: 18 }}>
      <div>我是App组件</div>
      <A />
    </Ctx.Provider>
  )
}

export default App

3. 在接收数据的组件,使用useContext钩子,获取ctx的数据,切记要把ctx/index.jsx文件夹下暴露出来的ctx传入到useContext中

复制代码
import Ctx from './ctx'
import { useContext } from 'react'
const C = () => {
  const ctx = useContext(Ctx)
  return (
    <>
      <div>我是C组件</div>
      <div>姓名:{ctx.name}</div>
      <div>年龄:{ctx.age}</div>
    </>
  )
}

export default C
相关推荐
Spider_Man12 小时前
打造属于你的前端沙盒 🎉
前端·typescript·github
用户479492835691512 小时前
🤫 你不知道的 JavaScript:`"👦🏻".length` 竟然不是 1?
前端·javascript·面试
掘金一周12 小时前
凌晨零点,一个TODO,差点把我们整个部门抬走 | 掘金一周 9.11
前端·人工智能·后端
用户81744134274813 小时前
kubernetes核心概念 Service
前端
xingkongv13 小时前
从“调接口仔”到“业务合伙人”:前端的 DDD 初体验
javascript·前端框架
东北南西13 小时前
Web Worker 从原理到实战 —— 把耗时工作搬到后台线程,避免页面卡顿
前端·javascript
Zz_waiting.13 小时前
案例开发 - 日程管理 - 第六期
前端·javascript·vue.js·路由·router
A 风13 小时前
封装日期选择器组件,带有上周,下周按钮
开发语言·javascript·vue.js
袁煦丞13 小时前
企业微信开发者的‘跨网穿梭门’:cpolar内网穿透实验室第499个成功挑战
前端·程序员·远程工作
Simon_He13 小时前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown