useContext学习随笔

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

是可以传递过去的