useContext是一个常用的Hooks
它的作用是传递数值给子组件
用法:
1.在主函数外面创建:
const Info = React.createContext({});
2.在主函数中使用Provider来进行传递,后面的values值为传递过去的数据
export const App =() => {
return(
<Info.Provider value={
{
name:"流光",
sex:"男"
}
}>
<Hello />
<Sex />
</Info.Provider>
)
}
这样数据就传递到包含的两个组件Hello和Sex里面了
3.在子组件里面进行接收,然后在子组件里面进行引用
const Hello = () =>{
const {name} = useContext(Info)
return(
<div>
你好,{name}
</div>
)
}
4.顺便一提,value除了传递设置好的值以外,还可以传递其他的变量进去
比如上一个例子
const Arr = {
name:"流光",
sex:"男"
}
export const App =() => {
return(
<Info.Provider value={Arr}>
<Hello />
<Sex />
</Info.Provider>
)
}
export default App
是可以传递过去的