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 元素(div
、x-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
并解决了问题。原因是,当您使用React
或ReactDOM
时,您必须将文件重命名为.tsx
而不是ts
。对于JavaScript
、.js
有效,但对于TypeScript
、.ts
无效。
【讨论】:
有一个类似的问题同样的答案***.com/questions/58341545/…【参考方案4】:对我来说,问题是我试图导入一个类型并用它来扩展一个类型:
import type ResultMap form...
试着做Promise<typeof ResultMap>
但这如果不起作用,因为
重要的是要注意,类在运行时有一个值,在设计时有一个类型,并且使用是上下文相关的。当使用 import type 来导入一个类时,你不能做从它扩展之类的事情。 (来源:ts docs)
【讨论】:
以上是关于useRef “指的是一个值,但在这里被用作一个类型。”的主要内容,如果未能解决你的问题,请参考以下文章