关于前端:React-React-Hooks-中使用context传参

30次阅读

共计 408 个字符,预计需要花费 2 分钟才能阅读完成。

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

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

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

代码:
提供数据组件:

接收数据组件:

完结

同步更新到本人的语雀
https://www.yuque.com/diracke…

正文完
 0