react之useContext

本文主要是介绍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

这篇关于react之useContext的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---