useRef “指的是一个值,但在这里被用作一个类型。”

Posted

技术标签:

【中文标题】useRef “指的是一个值,但在这里被用作一个类型。”【英文标题】:useRef "refers to a value, but is being used as a type here." 【发布时间】:2019-08-29 19:27:48 【问题描述】:

我正在试图弄清楚如何告诉 react 哪个元素被用作参考,即在我的情况下

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle 是来自第三方库的 SVG 组件,以这种方式定义会导致错误

是否有一些通用的方法来定义哪个元素是 ref?

【问题讨论】:

能分享一下useRef和AnimatedCircle的定义吗? Why does 'instanceof' in TypeScript give me the error "'Foo' only refers to a type, but is being used as a value here."?的可能重复 【参考方案1】:

就我而言,我将文件重命名为 .ts 而不是 .tsx。再次重命名它修复了它。

【讨论】:

伙计,我所有的麻烦都是这个错误!坦克,你刚刚解决了我的问题,花了 3 个小时在网上搜索所有关于此的内容。 我正准备把我的电脑扔出窗外——谢谢!!文件扩展名是我最后要看的地方【参考方案2】:

AnimatedCircle 是一个函数,而不是一个类型。这意味着它不能在 TypeScript 中用来代替类型,就像在 useRef 的通用约束中一样。相反,您需要使用typeof operator 转换为类型:

const circleRef = useRef<typeof AnimatedCircle | null>(null);

【讨论】:

构造函数通常也是类型,不是吗? 是的,但是由于 OP 声明 AnimatedCircle 是一种组件类型并且他们收到此错误,我愿意打赌它是一个函数而不是一个类。 在 React 中,所有组件类型通常都是 TitleCase。小写名称用于区分原生 DOM 元素(divx-your-name-here 等)和自定义 React 组件(AnimatedCircle)。虽然它打破了 javascript / typescript 的约定,但它是 React 中的约定,主要是因为没有其他非笨拙的方法可以使 React 与自定义元素和/或新元素一起工作标签 哦,我对此很熟悉,我只是习惯于将它们视为构造函数。但是当然,从 TypeScript 的类型角度来看,函数式组件不是构造函数,并且使用钩子基本上所有组件都变成了函数式组件。有点痛,希望能得到解决。 :-) | null 是干什么用的?【参考方案3】:

我遇到了同样的错误

ReactDOM.render(
<App store=store persistor=persistor basename=PUBLIC_URL />,
document.getElementById("root");

然后我将文件重命名为 .tsx 并解决了问题。原因是,当您使用ReactReactDOM 时,您必须将文件重命名为.tsx 而不是ts。对于JavaScript.js 有效,但对于TypeScript.ts 无效。

【讨论】:

有一个类似的问题同样的答案***.com/questions/58341545/…【参考方案4】:

对我来说,问题是我试图导入一个类型并用它来扩展一个类型:

import type ResultMap form...

试着做Promise&lt;typeof ResultMap&gt;

但这如果不起作用,因为

重要的是要注意,类在运行时有一个值,在设计时有一个类型,并且使用是上下文相关的。当使用 import type 来导入一个类时,你不能做从它扩展之类的事情。 (来源:ts docs)

【讨论】:

以上是关于useRef “指的是一个值,但在这里被用作一个类型。”的主要内容,如果未能解决你的问题,请参考以下文章

反应:useState 还是 useRef?

useRef 有时不会更新,只打印对象

React - UseState,UseRef..In Trouble

如何使用 useRef() 进行验证

UseEffect 中的 UseRef 问题

如何在 UseEffect 中将事件侦听器添加到 UseRefs