- 准备小图标并下载到项目中。
- 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像素大小。