react中useContext的用法

先在context文件中使用createContext创建初始值

javascript 复制代码
import React from 'react';

const TestContext = React.createContext(true);

export { TestContext };

然后在父组件中引入,利用Provider传入新值

javascript 复制代码
import { TestContext } from '@/utils/context';

<TestContext.Provider value={false}>
  <Child />
</TestContext.Provider>

在子组件中使用useContext获取值

javascript 复制代码
// Child
import { TestContext } from '@/utils/context';

useContext(TestContext); // false

需要注意的是只要父组件中Provider的value发生变化,所有使用了该Context的子组件都会重新渲染。

相关推荐
风骏时光牛马9 小时前
请告诉我标题对应的内容、想要的风格,我马上给你生成。
前端
deli0079 小时前
OAuth 2.0 授权码流程实测:4 次跳转,少个 state 就被劫持
前端
deli00711 小时前
手机20%突然关机?电量百分比是估的,SOC曲线4组实测
前端
深蓝AI21 小时前
Meta 开源用了八年的设计系统 astryx:连坐两天 GitHub 总榜第一,组件库开始写给 agent 的说明书
前端·人工智能
IT_陈寒1 天前
Vue的watch把我坑惨了,原来要这样用才靠谱
前端·人工智能·后端
1-1=01 天前
Vue 3 模板语
前端·javascript·vue.js
用户7610304473711 天前
【转战智能眼镜开发】ROKID AIUI 小游戏 亚马逊标枪项目实战讲解
前端
风卿1 天前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺1 天前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
用户老李1 天前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端