ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

react函数组件中使用context

2026/8/2 16:53:13 拓冰建站 浏览量
react函数组件中使用context

效果

1.在父组件中创建一个createcontext并将他导出

import React, { createContext } from 'react'
import Bpp from './Bpp'
import Cpp from './Cpp'
export let MyContext = createContext('我是组件B')
export let Ccontext = createContext('我是组件C')export default function App() {let a = '我是A组件传递的数据'let a1 = '我是A组件传递的二号数据'return (<MyContext.Provider value={a}><Ccontext.Provider value={a1}><div><div>context组件传值</div><div><Bpp /><Cpp /></div></div></Ccontext.Provider></MyContext.Provider>)
}

2.子组件先将父组件引入,然后通过usecontext方法进行接收

import React, { useContext } from 'react'
import {Ccontext} from './App'export default function Cpp() {let Cdate=useContext(Ccontext)return (<div>{Cdate}</div>)
}