当前位置: 首页 > news >正文

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
但这两个钩子函数不一样

  1. 返回值:useRef 返回一个对象,该对象具有 current 属性,该属性包含对组件的引用。createRef返回一个函数,该函数在组件挂载时创建一个引用,并在组件卸载时将其清理。

  2. 生命周期:useRef 在组件挂载时创建引用,并在组件卸载时将其清理。createRef 在组件挂载时创建引用,并在组件卸载时将其清理。

  3. 用法:useRef 通常用于在组件内部创建一个对组件的引用,以便在组件内部使用。createRef通常用于在组件外部创建一个对组件的引用,以便在组件外部使用。

相关文章:

React使用useRef ts 报错

最近在写自己的React项目&#xff0c;我在使用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 处理方法&#xff1a; 修改flink-runtime-web/pom.xml文件 将<arguments>ci --cache-max0 --no-save ${npm.proxy}</arguments> 替换为&#xff1a;<a…...

2024年8月份编译Openwrt系统基础

概述&#xff1a; 本文档记录openwrt系统的编译过程&#xff0c;以备后续再用&#xff0c;技术支持与指导&#xff01; 1.编译环境 环境需要Linux&#xff0c;我使用的环境是WSL2、Ubuntu 20.04 2.安装编译必须的依赖&#xff08;wsl、linux&#xff09; WSL2&#xff1a;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等文件&#xff0c;并在文件夹内放置以下内容&#xff08;注&#xff1a;URL要和真实请求地址保持一致&am…...

动态规划(二)——例题

目录 Help Jimmy 题目 解题思路 神奇的口袋 题目 枚举的解法 递归的解法 动态规划的解法 滑雪 题目 解题思路 解法一 解法二 Help Jimmy 题目 "Help Jimmy" 是在下图所示的场景上完成的游戏&#xff1a; 场景中包括多个长度和高度各不相同的平台。地面是…...

Node.js中判断是文件还是文件夹的多种方法

在Node.js中&#xff0c;我们经常需要判断一个路径是文件还是文件夹。Node.js提供了多种方法来实现这一功能&#xff0c;本文将详细介绍这些方法&#xff0c;并给出相应的示例代码。 一、使用fs.Stats对象 在Node.js中&#xff0c;fs模块提供了fs.stat()或fs.statSync()方法&…...

idea 如何打war包

idea 如何打war包 1.在IntelliJ IDEA中打包WAR文件&#xff0c;你可以按照以下步骤操作:1.设置项目结构:首先&#xff0c;打开IDEA&#xff0c;选择File>Project Structure(或使用快捷键CtrlAltShiftS)。在打开的窗口中&#xff0c;选择 Artifacts 选项 2.添加Web Applicat…...

米联客-FPGA程序设计Verilog语法入门篇连载-15 Verilog语法_跨时钟域设计

软件版本&#xff1a;无 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用所有系列FPGA 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 http://www.uisrc.com 视频课程、答疑解惑&#xff01; 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),前端通…...

催收业务怎么提高接通率

提高催收呼叫业务的接通率是一个综合性的任务&#xff0c;需要从多个方面进行优化。以下是一些具体的策略和建议&#xff1a; 一、优化呼叫时间与频次 1. 选择合适的呼叫时间&#xff1a;通过分析目标客户的活跃时段&#xff0c;选择他们最可能接听电话的时间进行呼叫…...

动态生成sitemaps和robots.txt文件:提升SEO与网站可爬性

本文由 ChatMoney团队出品 在现代Web开发中&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;是网站成功的关键因素之一。搜索引擎通过网络爬虫来索引网页&#xff0c;而sitemaps和robots.txt文件则是帮助这些爬虫更好地理解和索引网站内容的重要工具。 sitemaps简介 Sit…...

LeetCode 第二十五天 2024.8.12

1. &#xff1a;递增子序列 题目链接: 491. 非递减子序列 - 力扣&#xff08;LeetCode&#xff09; 应用条件&#xff1a;回溯 难点&#xff1a; 这道题的难点在于如何去重&#xff0c;肯定不能像我们在组合中去重那样对数组排序。而且我们是要对每一层进行去重&#xff0c;…...

Elasticsearch 全文查询详解

全文查询&#xff08;Full-Text Query&#xff09;是 Elasticsearch 中的核心功能之一&#xff0c;用于对非结构化文本数据进行高效检索。与结构化查询不同&#xff0c;全文查询不仅仅是简单的精确匹配&#xff0c;还包括对文本进行分析和处理&#xff0c;从而实现更复杂的搜索…...

20240810在荣品RK3588S-AHD开发板的预置Android13下挂载exFAT的256GB的TF卡

df -h mount fdisk无效 20240810在荣品RK3588S-AHD开发板的预置Android13下挂载exFAT的256GB的TF卡 2024/8/10 21:19 缘起&#xff1a;当时比较便宜96.9&#xffe5;/想看看256GB的TF卡的高速卡的效果&#xff0c;就在京东入手了3张三星的高速TF卡。最近在弄RK3588S&#xff0c…...

java基础进阶——log日志、类加载器、XML、单元测试、注解、枚举类

前言 这篇内容主要掌握的就是logback使用、理解类加载器、XML文件的编写&#xff0c;XML文档约束schema&#xff0c;用Dom4j解析XML文档&#xff0c;Xpath检索XML文档&#xff0c;完整使用Junit单元测试框架常用部分&#xff0c;注解的定义和使用&#xff0c;枚举类的定义和开发…...

《向量数据库指南》——控制Chatbot对话内容:Dopple AI的创新实践与用户体验优化

控制Chatbot对话内容:Dopple AI的创新实践与用户体验优化 在Chatbot技术日益成熟的今天,如何有效地控制对话内容,以满足用户多样化的需求,成为了开发者们关注的焦点。Dopple AI,作为一款先进的聊天机器人平台,通过其独特的交互设计和后端技术支持,为用户提供了前所未有…...

构建实时数据仓库:流式处理与实时计算技术解析

目录 一、流式处理 请求与响应 批处理 二、实时计算 三、Lambda架构 Lambda架构的缺点 四、Kappa架构 五、实时数据仓库解决方案 近年来随着业务领域的不断拓展&#xff0c;尤其像互联网、无线终端APP等行业应用的激增&#xff0c;产生的数据量呈指数级增长&#xff0c;对海量数…...

python算术表达式遗传算法

import random import operator import math# 定义可能的运算符和操作 ops {: ,-: -,*: *,/: /,sin: math.sin,cos: math.cos }# 随机生成一个表达式&#xff08;个体&#xff09; def generate_expression(depth0):if depth > 2: # 限制表达式的最大深度return str(rando…...

net.sf.jsqlparser.statement.select.SelectItem

今天一启动项目&#xff0c;出现了这个错误&#xff0c;仔细想了想&#xff0c;应该是昨天合并代码&#xff0c;导致的mybatis-plus版本冲突&#xff0c;以及分页PageHelper版本不兼容 可以看见这个我是最下边的 Caused by 报错信息&#xff0c;这个地方提示我 net .s…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...