[react+ts] useRef获取自定义组件dom或方法声明

想用useRef获取自定义组件?

如果获取dom,直接写

  const sonRef = useRef<HTMLDivElement>(null);

然后子组件用forwardRef包一层,注意是HTMLDivElement,别写错, 写HTMLElement不行

const Son = forwardRef<HTMLDivElement, IProps>((props, ref) => {})

切记这时Son不能写Son:React.FC了,不然报错

这时候可以打印dom了




那怎么拿子组件的方法呢? 先把 forwardRef第一个参数改为ref的类型

定义暴露的函数

  const handleClick = () => {
    setNum(8999);
  };
  useImperativeHandle(ref, () => {
    return {
      handleClick,
    };
  });

父组件也要改一下

这时候点一下就出来了

我直接打印sonRef.current试试

ok

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

gitlab的搭建及使用

1、环境准备 服务器准备 CentOS Linux release 7.9.2009 (Core)&#xff0c;内存至少4G。 修改主机名和配置ip地址 hostnamectl set-hostname <hostname> 关闭主机的防火墙 # 关闭防火墙 systemctl stop firewalld #临时关闭防火墙 systemctl disable firewalld …

No.2十六届蓝桥杯备战|练习题4道|数据类型|字符型|整型|浮点型|布尔型|signed|unsigned(C++)

B2002 Hello,World! - 洛谷 #include <iostream> using namespace std; int main() { cout << "Hello,World!" << endl; return 0; }打印飞机 #include <iostream> using namespace std;int main() {cout << " …

Dockerfile运行指令

1.RUN 在build构建时执行命令。 举例&#xff1a;安装vim Shell命令格式 RUN yum install -y vim Exec命令格式 RUN ["yum","install","-y","vim"] 2.CMD 用于设置容器启动时默认执行的命令或参数。 如果Dockerfile中有多个CMD&a…

OpenAI发布o3:圣诞前夜的AI惊喜,颠覆性突破还是技术焦虑?

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

计算和可视化相对湿度结果

了解如何确定 CFD 模型中的相对湿度。 了解相对湿度 大气是干燥空气和水蒸气的混合物&#xff0c;每一种的压力之和等于蒸气压。相对湿度是指空气中的水分量与空气在特定温度下可以容纳的最大水分量之比。它通常以百分比表示。它的范围从 0&#xff08;干燥空气&#xff09;到…

【笔记】在虚拟机中通过apache2给一个主机上配置多个web服务器

&#xff08;配置出来的web服务器又叫虚拟主机……&#xff09; 下载apache2 sudo apt update sudo apt install apache2 &#xff08;一&#xff09;ip相同 web端口不同的web服务器 进入 /var/www/html 创建站点一和站点二的目录文件&#xff08;目录文件名自定义哈&#x…

【Qt】多元素控件:QListWidget、QTableWidget、QTreeWidget

目录 QListWidget 核心属性&#xff1a; 核心方法&#xff1a; 核心信号&#xff1a; 例子&#xff1a; QListWidgetItem QTableWidget 核心方法&#xff1a; 核心信号 QTableWidgetItem 例子&#xff1a; QTreeWidget 核心方法&#xff1a; 核心信号&#xff1a…

vulnhub靶场【Hogwarts】之bellatrix

前言 靶机&#xff1a;hotwarts-dobby&#xff0c;ip地址为192.168.1.69 攻击&#xff1a;kali&#xff0c;ip地址为192.168.1.16 都采用虚拟机&#xff0c;网卡为桥接模式 主机发现 使用arp-scan -l或netdiscover -r 192.168.1.1/24扫描发现主机 信息收集 使用nmap扫描端…

Kerberos用户认证-数据安全-简单了解-230403

hadoop安全模式官方文档&#xff1a;https://hadoop.apache.org/docs/r2.7.2/hadoop-project-dist/hadoop-common/SecureMode.html kerberos是什么 kerberos是计算机网络认证协议&#xff0c;用来在非安全网络中&#xff0c;对个人通信以安全的手段进行身份认证。 概念&#…

2025:OpenAI的“七十二变”?

朋友们&#xff0c;准备好迎接AI的狂欢了吗&#xff1f;&#x1f680; 是不是跟我一样&#xff0c;每天醒来的第一件事就是看看AI领域又有什么新动向&#xff1f; 尤其是那个名字如雷贯耳的 OpenAI&#xff0c;简直就是AI界的弄潮儿&#xff0c;一举一动都牵动着我们这些“AI发…

有什么AI辅助阅读文献工具推荐?

AI的发展速度非常快&#xff0c;在很多方面都已经可以提供货真价实的辅助能力。 比如AI辅助阅读方面&#xff0c;可以获取、分析和理解大量文献资料。这可以帮助我们快速浏览和理解PDF文件和其他文档&#xff0c;提高我们的工作效率和学习效率&#xff0c;达到降本增效。 作为…

目标检测,语义分割标注工具--labelimg labelme

1 labelimg labelimg可以用来标注目标检测的数据集&#xff0c; 提供多种格式的输出&#xff0c; 如Pascal Voc, YOLO等。 1.1 安装 pip install labelimg1.2 使用 命令行直接输入labelimg即可打开软件主界面进行操作。 使用非常简单&#xff0c; 不做过细的介绍&#xff0…

30天开发操作系统 第 10 天 -- 叠加处理

前言 得益于昨天的努力&#xff0c;我们终于可以进行内存管理了。不过仔细一看会注意到&#xff0c;bootpack.c都已经有254行了。笔者感觉这段程序太长了&#xff0c;决定整理一下&#xff0c;分出一部分到memory.c中去。(整理中)…好了&#xff0c;整理完了。现在bootpack.c变…

C语言性能优化:从基础到高级的全面指南

引言 C 语言以其高效、灵活和功能强大而著称&#xff0c;被广泛应用于系统编程、嵌入式开发、游戏开发等领域。然而&#xff0c;要写出高性能的 C 语言代码&#xff0c;需要对 C 语言的特性和底层硬件有深入的了解。本文将详细介绍 C 语言性能优化的背后技术&#xff0c;并通过…

unity学习4:git和SVN的使用差别

目录 1 svn 1.1 操作逻辑 1.2 对应工具 1.3 SVN避免冲突的好习惯 2 git 2.1 git的基础操作逻辑 2.1.1 commit时&#xff0c;提交文件之外的其他文件需要pull 2.1.2 commit时&#xff0c;发现要提交的本地文件和服务器的文件冲突了 2.1.3 pull 时 2.2 对应工具 2.3 …

2024 年博客总结

2024年 我做了个Hexo博客 &#xff0c;博客地址为&#xff1a;https://blog.mybatis.io。 2024 年发布的文章 一共发布了 31 篇博客&#xff0c;平均一个月 2.6 篇。 Ollama 导入自定义模型 阅读数/评论数: 7433/5Spring AI 使用本地 Ollama Embeddings 阅读数/评论数: 5311…

Python中PDF转Word的技术

Python PDF转Word技术概述 在日常办公和数据处理中&#xff0c;经常需要将PDF文档转换为Word文档&#xff0c;以便进行编辑、修改或格式调整。Python作为一种强大的编程语言&#xff0c;提供了多种库和工具来实现这一功能。以下是对Python中PDF转Word技术的详细介绍。 一、技…

vue3+ts+element-plus 表单el-form取消回车默认提交

问题描述&#xff1a;在表单el-form中的el-input中按回车后&#xff0c;页面会刷新&#xff0c;url也会改变&#xff0c; 回车前&#xff1a; 回车后&#xff1a; 相关代码&#xff1a; 解决方法1&#xff1a;在 el-form 上阻止默认的 submit 事件&#xff0c;增加 submit.pre…

【数据结构05】排序

系列文章目录 【数据结构05】排序 . 【算法思想04】二分查找 文章目录 系列文章目录[toc] 1. 基本思想与实现1.1 插入类排序1.1.1 直接插入排序&#xff08;*&#xff09;1.1.2 折半插入排序1.1.3 希尔排序&#xff08;*&#xff09; 1.2 交换类排序1.2.1 冒泡排序&#xff08…

QT----------文件系统操作和文件读写

一、输入输出设备类 功能&#xff1a; Qt 提供了一系列的输入输出设备类&#xff0c;用于处理不同类型的 I/O 操作&#xff0c;如文件、网络等。 二、文件读写操作类 QFile 类&#xff1a; 提供了对文件的读写操作&#xff0c;可以打开、读取、写入和关闭文件。示例&#x…