react useRef ts 编译报错 不能将类型“MutableRefObject＜HTMLDivElement | undefined＞”分配给类型“LegacyRef＜HTMLDivEleme

最新推荐文章于 2022-12-19 20:00:07 发布
最新推荐文章于 2022-12-19 20:00:07 发布
阅读量1.2w 收藏 2
点赞数 5
分类专栏： 问题记录 react typescript 文章标签： js react ts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29311407/article/details/121567973
版权
问题记录 同时被 3 个专栏收录
21 篇文章 1 订阅
订阅专栏
react
13 篇文章 0 订阅
订阅专栏
typescript
2 篇文章 0 订阅
订阅专栏

不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef | undefined”。

1.没赋初值
2. useRef里面没写对类型

正确的列子

   const canvasRef = useRef<HTMLCanvasElement|null>(null)

/// ....


return <canvas ref={canvasRef }>
mytac
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
React + ts学习笔记
luobo2345的博客
05-06 1068
在react中使用ts，定义函数组件、类组件、hook使用（useState，useRef、useMemo），事件处理（事件对象、事件函数），ts基本使用
项目经验：react中使用typescript
weixin_44828005的博客
08-16 723
前言 如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案 使用规则 在 react 中使用 ts 的几点原则和变化： 所有用到jsx语法的文件都需要以tsx后缀命名 使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！ 全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义 对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明 函数组件 import React from 'react
react useRef ts 编译报错 不能将类型“MutableRefObject＜HTMLDivElement undefined＞”分配给类型“LegacyRef＜HTMLDivEleme
m0_67402341的博客
03-03 2862
不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef | undefined”。 1.没赋初值 2. useRef里面没写对类型 正确的列子 const canvasRef = useRef<HTMLCanvasElement|null>(null) /// .... return <canvas ref={canvasRef }> ...
React.ClassAttributes＜HTMLDivElement＞.ref?: React.LegacyRef＜HTMLDivElement＞
叶子先生的博客
04-06 3402
(JSX attribute) React.ClassAttributes.ref?: React.LegacyRef Type ‘MutableRefObject’ is not assignable to type ‘LegacyRef’. Type ‘MutableRefObject’ is not assignable to type ‘RefObject’. Types of property ‘current’ are incompatible. Property ‘align’ is miss
关于 useRef 返回值的类型声明探究
北筏的博客
02-17 3471
现上段代码： import { useRef } from "react"; const Main = () => { // useRef 没有传入参数，也就是传入了 undefined // 查看 divRef 的类型。 // const divRef: React.MutableRefObject<HTMLDivElement | undefined> const divRef = useRef<HTMLDivElement>(); return (
TS 对象可能为“未定义”，不能将类型“ XXXX | undefined “分配给类型{ xxxx }
热门推荐
程邓楠的博客
12-19 5万+
最近用 typeScript ，也就是大家常说的 【TS 】写点东西，但是老是提醒这个未定义，那个可能为空，主要是 tsconfig.json 中的严格模式我没关，所以今天总结一下，严格模式中【TS】中遇到对象可能为“未定义” 的具体场景，以及共有几种解决方法！
ts-不能将类型“HTMLElement | null”分配给类型“HTMLElement”。 不能将类型“null”分配给类型“HTMLElement”
m0_71202576的博客
10-21 1587
ts报错
React报错之Property ‘value‘ does not exist on type ‘HTMLElement‘
m0_56069948的博客
08-27 2649
正文从这开始~当我们试图访问一个类型为的元素上的属性时，会产生"Property ‘value’ does not exist on type ‘HTMLElement’"错误。为了解决该错误，在访问属性之前，使用类型断言将元素类型断言为。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vqD4BHIZ-1661534128424)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75da2f875f0f4a5d96deea6
在react+typescript中使用echarts
weixin_46353030的博客
08-02 1327
在react+typescript中使用echarts出现类型“null”的参数不能赋给类型“HTMLElement”的参数错误提示，附demo
React+ts完成二级联动
weixin_57156748的博客
09-22 226
.tsx文件 import { Component, createRef} from 'react' import './index.less' interface State { top: any ButtonList: Button[] ContentList: Content[] ButtonIndex: number } interface Button { id: string text: string } interface Content { id: str
react中useRef详细总结
aliven1的博客
09-17 1万+
一、什么是useRef const refContainer = useRef(initialValue); 1 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。返回的 ref 对象在组件的整个生命周期内保持不变当更新 current 值时并不会 re-render ，这是与 useState 不同的地方更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里us
不能将类型“Ref.......“分配给类型“(...args: any) =＞ void”。
H_jrqn的博客
07-24 5002
不能将类型“Ref.......“分配给类型“(...args: any) => void”。
二、typescript基础类型
qq_38677540的博客
09-01 279
基础数据
报错：不能将类型“undefined”分配给类型“RouteType”。ts(2322)
老衲的少女心i~
06-07 1万+
报错： 不能将类型“({ path: string; component: (props: RouteComponentProps<{}, StaticContext, unknown>) => Element; } | undefined)[]”分配给类型“RouteType[]”。 不能将类型“{ path: string; component: (props: RouteComponentProps<{}, StaticContext, unknown>) => E
React+TS中使用ref属性遇到的坑
weixin_44824839的博客
07-13 8661
开始代码： 获取ref指定的当前元素对象 在componentDidMount中可以this来获取这么写： componentDidMount(): void { const domWidth:any= this.domWidth.current this.setState({width:domWidth.clientWidth/2,height:domWidth.clientHeight}) } 但是在static getDerivedStateFromProps中就不能采用this.的方
html 类型div,属性不上类型存在“DetailedHTMLProps，HTMLDivElement>”与之反应16
weixin_32506743的博客
06-11 3295
import * as React from 'react';但收到此错误信息：错误TS2339：属性“大小”不存在于类型 '详细HTML详细信息< HTMLAttributes < HTMLDivElement>，HTMLDivElement>'。这thread建议做一个module augmentation，所以我想是这样的：import * as React from...
react报错You should not use <KeepAlive /> outside a <AliveScope>
最新发布
05-21
这个错误提示意思是你在使用`<KeepAlive />`组件时，没有放在`<AliveScope>`组件中。`<AliveScope>`是`react-activation`库中提供的组件，用于管理`<KeepAlive />`组件的状态，确保它们只在需要时被缓存和恢复。 为了解决这个问题，你需要将`<KeepAlive />`组件放在`<AliveScope>`组件内，例如： ```jsx import { AliveScope, KeepAlive } from 'react-activation'; function App() { return ( <AliveScope> <div> <h1>My App</h1> <KeepAlive> <MyComponent /> </KeepAlive> </div> </AliveScope> ); } ``` 这样就可以正常使用`<KeepAlive />`组件了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值