如何在React与TypeScript中正确使用useRef和createRef:ref的类型化
大家好!我是React和TypeScript的新手,在使用ref时遇到了问题。我试图通过useRef访问DOM元素(例如输入字段),但TypeScript一直报类型错误。
以下是我的代码:
```typescript
import React, { useRef, useEffect } from 'react';
const MyComponent: React.FC = () => {
const inputRef = useRef(null); // 错误:类型'null'的参数不能赋值给类型'HTMLInputElement'的参数
useEffect(() => {
inputRef.current?.focus(); // 错误:类型'never'上不存在属性'focus'
}, []);
return ;
};
```
我尝试了不同的方法,但TypeScript要么在初始化`useRef(null)`时报错,要么在尝试调用`focus()`时报错。我也试过使用`createRef`——同样的问题。在JavaScript中这段代码运行正常,但在TypeScript中我卡住了。
请告诉我如何在React + TypeScript中正确对ref进行类型化?是否需要指定元素类型?