React使用useRef ts 报错
最近在写自己的React项目,我在使用useRef钩子函数的时候发现
TS2322: Type MutableRefObject<HTMLDivElement | undefined> is not assignable to type LegacyRef<HTMLDivElement> | undefined
Type MutableRefObject<HTMLDivElement | undefined> is not assignable to type RefObject<HTMLDivElement>
Types of property current are incompatible.
Type HTMLDivElement | undefined is not assignable to type HTMLDivElement | null
Type undefined is not assignable to type HTMLDivElement | null
index.d.ts(303, 9): The expected type comes from property ref which is declared here on type
这是我的代码:
const backgroundDOM = useRef<HTMLDivElement>();

解决方法:
const backgroundDOM = useRef<HTMLDivElement>(null);
增加初始化值,也可以用createRef
但这两个钩子函数不一样
-
返回值:useRef 返回一个对象,该对象具有 current 属性,该属性包含对组件的引用。createRef返回一个函数,该函数在组件挂载时创建一个引用,并在组件卸载时将其清理。
-
生命周期:useRef 在组件挂载时创建引用,并在组件卸载时将其清理。createRef 在组件挂载时创建引用,并在组件卸载时将其清理。
-
用法:useRef 通常用于在组件内部创建一个对组件的引用,以便在组件内部使用。createRef通常用于在组件外部创建一个对组件的引用,以便在组件外部使用。
相关文章:
React使用useRef ts 报错
最近在写自己的React项目,我在使用useRef钩子函数的时候发现 TS2322: Type MutableRefObject<HTMLDivElement | undefined> is not assignable to type LegacyRef<HTMLDivElement> | undefined Type MutableRefObject<HTMLDivElement | undefined&g…...
python-信息交互-pyautogui
python-信息交互-pyautogui 一: pyautogui1> waht?2> 功能分类3> 概念及作用二: 通用功能1> function all2> function 注释三: 鼠标控制1> mouse functions2> mouse functions demo3> mouse drag demo四: keyboard控制1> keyboard functions2> …...
flink1.18 编译遇到的问题
1. flink-runtime-web编译失败 源码编译时一直卡在 [INFO] Running ‘npm ci --cache-max0 --no-save’ in 处理方法: 修改flink-runtime-web/pom.xml文件 将<arguments>ci --cache-max0 --no-save ${npm.proxy}</arguments> 替换为:<a…...
2024年8月份编译Openwrt系统基础
概述: 本文档记录openwrt系统的编译过程,以备后续再用,技术支持与指导! 1.编译环境 环境需要Linux,我使用的环境是WSL2、Ubuntu 20.04 2.安装编译必须的依赖(wsl、linux) WSL2:Bu…...
Vue3+vite+ts 项目使用mockjs
1、安装mockjs npm i mockjs 2、安装vite-plugin-mock npm i vite-plugin-mock -D 3、安装axios npm i axios 4.在src目录下创建mock文件夹,在文件夹内创建login.ts等文件,并在文件夹内放置以下内容(注:URL要和真实请求地址保持一致&am…...
动态规划(二)——例题
目录 Help Jimmy 题目 解题思路 神奇的口袋 题目 枚举的解法 递归的解法 动态规划的解法 滑雪 题目 解题思路 解法一 解法二 Help Jimmy 题目 "Help Jimmy" 是在下图所示的场景上完成的游戏: 场景中包括多个长度和高度各不相同的平台。地面是…...
Node.js中判断是文件还是文件夹的多种方法
在Node.js中,我们经常需要判断一个路径是文件还是文件夹。Node.js提供了多种方法来实现这一功能,本文将详细介绍这些方法,并给出相应的示例代码。 一、使用fs.Stats对象 在Node.js中,fs模块提供了fs.stat()或fs.statSync()方法&…...
idea 如何打war包
idea 如何打war包 1.在IntelliJ IDEA中打包WAR文件,你可以按照以下步骤操作:1.设置项目结构:首先,打开IDEA,选择File>Project Structure(或使用快捷键CtrlAltShiftS)。在打开的窗口中,选择 Artifacts 选项 2.添加Web Applicat…...
米联客-FPGA程序设计Verilog语法入门篇连载-15 Verilog语法_跨时钟域设计
软件版本:无 操作系统:WIN10 64bit 硬件平台:适用所有系列FPGA 板卡获取平台:https://milianke.tmall.com/ 登录“米联客”FPGA社区 http://www.uisrc.com 视频课程、答疑解惑! 1概述 本小节主要讲解Verilog语法的…...
gradio 对话界面实现支持图片、视频正常显示
参考: https://www.gradio.app/docs/gradio/chatbot 问题: gradio网页输出视频nan;图片webp显示不出来 解决方法:需要通过gradio的Video、Image包装 代码: 这里下面启动个后端vlm模型(参考:https://blog.csdn.net/weixin_42357472/article/details/141126225),前端通…...
催收业务怎么提高接通率
提高催收呼叫业务的接通率是一个综合性的任务,需要从多个方面进行优化。以下是一些具体的策略和建议: 一、优化呼叫时间与频次 1. 选择合适的呼叫时间:通过分析目标客户的活跃时段,选择他们最可能接听电话的时间进行呼叫…...
动态生成sitemaps和robots.txt文件:提升SEO与网站可爬性
本文由 ChatMoney团队出品 在现代Web开发中,搜索引擎优化(SEO)是网站成功的关键因素之一。搜索引擎通过网络爬虫来索引网页,而sitemaps和robots.txt文件则是帮助这些爬虫更好地理解和索引网站内容的重要工具。 sitemaps简介 Sit…...
LeetCode 第二十五天 2024.8.12
1. :递增子序列 题目链接: 491. 非递减子序列 - 力扣(LeetCode) 应用条件:回溯 难点: 这道题的难点在于如何去重,肯定不能像我们在组合中去重那样对数组排序。而且我们是要对每一层进行去重,…...
Elasticsearch 全文查询详解
全文查询(Full-Text Query)是 Elasticsearch 中的核心功能之一,用于对非结构化文本数据进行高效检索。与结构化查询不同,全文查询不仅仅是简单的精确匹配,还包括对文本进行分析和处理,从而实现更复杂的搜索…...
20240810在荣品RK3588S-AHD开发板的预置Android13下挂载exFAT的256GB的TF卡
df -h mount fdisk无效 20240810在荣品RK3588S-AHD开发板的预置Android13下挂载exFAT的256GB的TF卡 2024/8/10 21:19 缘起:当时比较便宜96.9¥/想看看256GB的TF卡的高速卡的效果,就在京东入手了3张三星的高速TF卡。最近在弄RK3588S,…...
java基础进阶——log日志、类加载器、XML、单元测试、注解、枚举类
前言 这篇内容主要掌握的就是logback使用、理解类加载器、XML文件的编写,XML文档约束schema,用Dom4j解析XML文档,Xpath检索XML文档,完整使用Junit单元测试框架常用部分,注解的定义和使用,枚举类的定义和开发…...
《向量数据库指南》——控制Chatbot对话内容:Dopple AI的创新实践与用户体验优化
控制Chatbot对话内容:Dopple AI的创新实践与用户体验优化 在Chatbot技术日益成熟的今天,如何有效地控制对话内容,以满足用户多样化的需求,成为了开发者们关注的焦点。Dopple AI,作为一款先进的聊天机器人平台,通过其独特的交互设计和后端技术支持,为用户提供了前所未有…...
构建实时数据仓库:流式处理与实时计算技术解析
目录 一、流式处理 请求与响应 批处理 二、实时计算 三、Lambda架构 Lambda架构的缺点 四、Kappa架构 五、实时数据仓库解决方案 近年来随着业务领域的不断拓展,尤其像互联网、无线终端APP等行业应用的激增,产生的数据量呈指数级增长,对海量数…...
python算术表达式遗传算法
import random import operator import math# 定义可能的运算符和操作 ops {: ,-: -,*: *,/: /,sin: math.sin,cos: math.cos }# 随机生成一个表达式(个体) def generate_expression(depth0):if depth > 2: # 限制表达式的最大深度return str(rando…...
net.sf.jsqlparser.statement.select.SelectItem
今天一启动项目,出现了这个错误,仔细想了想,应该是昨天合并代码,导致的mybatis-plus版本冲突,以及分页PageHelper版本不兼容 可以看见这个我是最下边的 Caused by 报错信息,这个地方提示我 net .s…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
