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

最新推荐文章于 2024-08-14 20:59:51 发布

mytac

最新推荐文章于 2024-08-14 20:59:51 发布

阅读量1.2w

点赞数 5

分类专栏：问题记录 react typescript 文章标签： js react ts

本文链接：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 }>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mytac

关注关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React + ts学习笔记

luobo2345的博客

05-06

1083

在react中使用ts，定义函数组件、类组件、hook使用（useState，useRef、useMemo），事件处理（事件对象、事件函数），ts基本使用

项目经验：react中使用typescript

weixin_44828005的博客

08-16

726

前言如果你学会了，可以忽略本文章，或去项目经验地图寻找更多答案使用规则在 react 中使用 ts 的几点原则和变化：所有用到jsx语法的文件都需要以tsx后缀命名使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明函数组件 import React from 'react

4 条评论您还未登录，请先登录后发表或查看评论

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

m0_67402341的博客

03-03

2885

不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef | undefined”。 1.没赋初值 2. useRef里面没写对类型正确的列子 const canvasRef = useRef<HTMLCanvasElement|null>(null) /// .... return <canvas ref={canvasRef }> ...

React使用useRef ts 报错

热门推荐

程邓楠的博客

12-19

5万+

最近用 typeScript ，也就是大家常说的【TS 】写点东西，但是老是提醒这个未定义，那个可能为空，主要是 tsconfig.json 中的严格模式我没关，所以今天总结一下，严格模式中【TS】中遇到对象可能为“未定义” 的具体场景，以及共有几种解决方法！

React报错之Property ‘value‘ does not exist on type ‘HTMLElement‘

m0_56069948的博客

08-27

2664

正文从这开始~当我们试图访问一个类型为的元素上的属性时，会产生"Property ‘value’ does not exist on type ‘HTMLElement’"错误。为了解决该错误，在访问属性之前，使用类型断言将元素类型断言为。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vqD4BHIZ-1661534128424)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75da2f875f0f4a5d96deea6

ReactHooks+TS项目echarts3D立体环形图

m0_37964179的博客

05-12

2341

echarts3D立体环形图效果图如下 components 中的echarts/index.tsx import * as React from 'react'; import classnames from 'classnames'; import * as echarts from 'echarts'; import 'echarts-gl'; import _ from 'lodash'; import { useSize, useUnmount } from 'ahooks'; i

在react+typescript中使用echarts

weixin_46353030的博客

08-02

1334

在react+typescript中使用echarts出现类型“null”的参数不能赋给类型“HTMLElement”的参数错误提示，附demo

ts-不能将类型“HTMLElement | null”分配给类型“HTMLElement”。不能将类型“null”分配给类型“HTMLElement”

m0_71202576的博客

10-21

1603

ts报错

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

5032

不能将类型“Ref.......“分配给类型“(...args: any) => void”。

二、typescript基础类型

qq_38677540的博客

09-01

284

基础数据

报错：不能将类型“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

8673

开始代码：获取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

3301

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 />`组件了。

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

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