useRef "refers to a value, but is being used as a type here."

Question

I'm trying to figure out how to tell react which element is being used as ref i.e. in my case

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle is an SVG component from a third party library, and defining it this way causes error

Is there some universal way to define which element is ref?

Answer 1

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

Answer 2

AnimatedCircle是一个函数，而不是一个类型。这意味着它不能在TypeScript中代替类型使用，例如在的通用约束中useRef。相反，您需要使用将typeof operator转换为类型：

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

Answer 3

我遇到了同样的错误

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

我将文件重命名为.tsx并解决了问题。原因是，当您使用React或 时ReactDOM，您必须将文件重命名.tsx为ts. 对于JavaScript，.js有效但对于TypeScript，.ts不起作用。