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

最新推荐文章于 2024-04-16 11:57:30 发布
最新推荐文章于 2024-04-16 11:57:30 发布
阅读量4.3k 收藏 1
点赞数 1
分类专栏： 前端 html 面试 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web13638179351/article/details/123080190
版权
前端 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏
面试
3 篇文章 0 订阅
订阅专栏

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

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

正确的列子

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

/// ....


return <canvas ref={canvasRef }>
web13638179351
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在react中使用typescript学习笔记
qq_43653724的博客
04-27 767
在react中使用typescript 常用props ts类型 基础属性类型 type AppProps = { message: string count: number disabled: boolean /** array of a type! */ names: string[] /** string literals to specify exact string values, with a union type to join them together */ s
prop-types-to-ts:Codemod 将 React PropTypes 转换为 TypeScript 类型
08-04
Codemod 将 React PropTypes 转换为 TypeScript 类型。 主要特征 支持函数和类组件 支持类组件上的static propTypes声明 支持具有多个组件的文件 转换为 TS 后删除或保留 PropTypes 的选项 用法 使用与要转换的文件...
react useRef ts 编译报错 不能将类型“MutableRefObject＜HTMLDivElement | undefined＞”分配给类型“LegacyRef＜HTMLDivEleme
mytac的博客
11-26 1万+
不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef | undefined”。 1.没赋初值 2. useRef里面没写对类型 正确的列子 ···tsx const canvasRef = useRef(null) /// … return <canvas ref={canvasRef }> ··· ...
React 中的 useRef 与 useState
最新发布
weixin_59837683的博客
04-16 610
React 是一个流行的 JavaScript 库，用于构建用户界面。它提供了几个钩子，使开发人员能够管理状态并执行副作用。React 中两个常用的钩子是useRef和useState。虽然它们乍一看似乎很相似，但它们具有不同的目的并且具有不同的用例。在本文中，我们将深入探讨useRef和useState，比较它们的功能并提供示例来说明它们的用法。
react+ts项目中函数式组件使用useref()
m0_66809099的博客
04-21 717
用useref()得useRef<HTMLInputElement | null>(null)对于我这种有强迫症的人,看到有红线就像解决.(家人们谁懂啊- _ -)个人感觉ts项目还是挺麻烦的不进行类型选择就容易爆红.
TS-React：useRef 使用
小栗子的博客
01-22 759
Cannot assign to ‘current’ because it is a read-only property.（不能给current属性复制，因为它是一个只读属性。解决方案：将 current 属性变为非只读属性，useRef 的泛型参数中增加【| null】即可把 current 属性变为非只读属性。
react + ts or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
react-native-popover, 用于响应本机的<Popover/> 组件.zip
09-18
react-native-popover, 用于响应本机的<Popover/> 组件 react-native-popover 用于响应本机的<Popover> 组件。 这仍然是一个正在进行中的工作，只处理最简单的情况，想法和贡献是非常受欢迎的。 安装npm i --save ...
为react组件库添加typescript类型提示的方法
10-15
主要介绍了为react组件库添加typescript类型提示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react-native-screcorder, 用于响应本机的<Recorder/> 元素.zip
09-18
react-native-screcorder, 用于响应本机的<Recorder/> 元素 react-native-screcorder一种反应本机组件，用于捕获图片和记录与藤类似的图片。基于这个了不起的图书馆 SCRecorder 。正在启动npm install react-native-...
React antd表单使用Ref - MutableRefObject
weixin_46031207的博客
08-14 1276
current：最初，它被设置为你传递的 initialValue。如果你把 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性。initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。useRef 是一个 React Hook，它能让你引用一个不需要渲染的值。假设antd的表格点击显示弹窗，在父组件中点击按钮来保存子组件弹窗中的数据，在后续的渲染中，useRef 将返回同一个对象。
(property) React.MutableRefObject＜null＞.current: null这种报错怎么处理？
weixin_41704576的博客
05-12 947
这段代码是 TypeScript 的类型注解，表示一个名为 `current` 的可变引用类型变量，它的初始值为 `null`。在 React 中，`useRef` hook 返回的是一个可变引用类型变量，因此需要使用 `React.MutableRefObject` 类型来进行类型注解。该类型定义在 React 的声明文件中，并且具有一个泛型参数，用于指定引用变量的类型。在这个例子中，`React.MutableRefObject` 表示一个可变引用类型变量，其初始值为 `null`。
【Typescript】报错：不能将xxx分配给“intrinsicAttribute“...
tuzi007a的博客
03-30 803
【Typescript】报错：不能将xxx分配给"intrinsicAttribute"...
不能将类型“XXX“分配给类型“IntrinsicAttributes & IntrinsicClassAttributes＜PieChart＞ & Readonly＜{}＞ & Reado“
Little_Pig_Bug的博客
06-16 1万+
警告如下
Day 209/300 React Hook之useRef基本用法
xinghuowuzhao的博客
04-19 829
（一）需求 最近在学习React，学到了React Hook 做了 useRef Demo。 （二）介绍 使用useRef是为了修改某个DOM节点相关的操作。 下面的Demo是使用useRef实现，input输入框获取焦点的例子。 /* * @Author: ArdenZhao * @Date: 2022-04-19 10:47:35 * @LastEditTime: 2022-04-19 10:54:38 * @FilePath: /react-ts/src/components/react/11
React.ClassAttributes＜HTMLDivElement＞.ref?: React.LegacyRef＜HTMLDivElement＞
叶子先生的博客
04-06 3337
(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
React 中使用TypeScript
大灰狼的小绵羊哥哥的博客
11-28 2666
一、组件声明 在React中，组件的声明方式有两种：函数组件和类组件， 来看看这两种类型的组件声明时是如何定义TS类型的。 1. 类组件 类组件的定义形式有两种：React.Component<P, S={}> 和 React.PureComponent<P, S={} SS={}>，它们都是泛型接口，接收两个参数，第一个是props类型的定义，第二个是state类型的定义，这两个参数都不是必须的，没有时可以省略： interface IProps { name: st
TS 对象可能为“未定义”，不能将类型“ XXXX | undefined “分配给类型{ xxxx }
热门推荐
程邓楠的博客
12-19 4万+
最近用 typeScript ，也就是大家常说的 【TS 】写点东西，但是老是提醒这个未定义，那个可能为空，主要是 tsconfig.json 中的严格模式我没关，所以今天总结一下，严格模式中【TS】中遇到对象可能为“未定义” 的具体场景，以及共有几种解决方法！
eact中 在tsx规范中组件使用 React.forwardRef后，在使用组件时获取ref为null。提示 不能将类型“MutableRefObject<Element>”分配给类型“VNodeRef & Ref<Element>”
06-02
这个错误通常是由于 `VNodeRef` 和 `Ref<Element>` 之间的类型不匹配造成的。为了解决这个问题，我们可以使用 `React.ForwardedRef` 类型，它是 `React.Ref` 的一个子类，专门用于在 `React.forwardRef` 中使用。 例如，假设我们有一个 `MyComponent` 组件，它使用了 `React.forwardRef`，但在使用组件时，获取的 `ref` 为 `null`，同时出现了上述的类型错误。我们可以这样来解决： ```tsx import React from 'react'; interface MyComponentProps { // ... } const MyComponent = React.forwardRef<HTMLDivElement, MyComponentProps>((props, ref) => { return ( <div ref={ref}> {/* ... */} </div> ); }); export default MyComponent; ``` 使用 `React.ForwardedRef` 类型，将 `ref` 的类型设置为 `HTMLDivElement`，表示我们期望 `ref` 引用的是 `div` 元素。这样，我们就可以正确地获取 `ref` 了。 在使用组件时，需要使用 `React.createRef` 来创建一个 `ref` 对象，将其传递给 `MyComponent` 组件的 `ref` 属性。这样，`ref` 就可以正确地绑定到 `div` 元素上了。 ```tsx import React from 'react'; import MyComponent from './MyComponent'; function App() { const myComponentRef = React.createRef<HTMLDivElement>(); function handleClick() { myComponentRef.current?.focus(); } return ( <div> <MyComponent ref={myComponentRef} /> <button onClick={handleClick}>Focus Div</button> </div> ); } export default App; ``` 这样就能正确地获取 `ref` 了，同时也不会出现类型错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值