logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

用 Context 给 React 组件传递数据

  • 准备小图标并下载到项目中。
  • React应用可通过属性或context传递数据,context省去层层传递。
  • 创建context需从React包导入createContext,导出context并设置默认值例如主题sim为light。
  • 使用useState在App组件中创建状态sim与setSim。
  • useContext传递的数据由任意级别后代直接读取。
  • 提供数据类型appContextValue,包含string类型的sem和dispatch函数的setSem。
  • 提供者组件provider允许订阅context变化。
  • 使用context值,在AppHeader类组件中通过Consumer组件访问sim与setTMM。
  • 根据sim状态显示不同小图标,light显示light icon,dark显示dark icon。
  • 点击小图标可以切换sim状态。
  • 调整AppHeader的样式,使用gap属性为间隔添加16像素大小。