[React] React Hooks 中使用context传参

当组件嵌套层级很深时,最外层组件传递数据到最内层使用props层层传递既繁琐、不便于写,也不直观。这时候可以使用context传参。

这里介绍React Hooks中使用context传参 (有别于React Class中的使用)
提供数据组件:
1、需要使用React.createContext创建context (如UserContext);并export UserContext。
2、使用创建出的UserContext.Provider作为祖先元素包裹接收数据的组件。
3、在上使用value属性传递需要用context传递的数据。

接受数据的组件:
1、引入提供数据组件创建的context (这里是UserContext)
2、useContext接收数据
3、使用

代码:
提供数据组件:
image.png

接收数据组件:
image.png

完结

同步更新到自己的语雀
https://www.yuque.com/diracke...

你可能感兴趣的:([React] React Hooks 中使用context传参)