1.引用createContext,useContext
import React,{createContext,useContext} from 'react';
2. 创建个变量接受一下createContext,例:
const ageContext = createContext();
3.在父组件中定义要传递的值(value变量),一定要使用.Provider,ageContext是前面设置的变量
<ageContext.Provider value={age}>
<Child></Child>
</ageContext.Provider>
4.在子组件中使用useContext,定义个变量接收,然后在子组件中引用即可
let childAge = useContext(ageContext);
效果如图所示:
完整代码如下:
import React,{createContext,useContext} from 'react';
const ageContext = createContext();
function Child(){
let childAge = useContext(ageContext);
return (
<h1>我是子组件----{childAge}</h1>
)
}
function App() {
const age = 18;
return (
<div>
<h1>我是父组件------今年{age}岁</h1>
<ageContext.Provider value={age}>
<Child></Child>
</ageContext.Provider>
</div>
);
}
export default App;