• • 此问题在此处已有答案**：

React/Typescript - when using ref I get typescript error - Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void'（2个答案）
4天前关闭。
我的应用程序. tsx如下所示

import { useRef, useState } from "react";
import InputField from "./InputField";
import "./styles.css";

export default function App() {
 
  const checkInRef = useRef<HTMLInputElement>(null);
  return (
      <InputField        
        ref={checkInRef}
      />
  );
}

InputField.tsx看起来像这样

import {
  Dispatch,
  SetStateAction,
  forwardRef,
} from "react";

const InputField = forwardRef<HTMLInputElement>(function (props, ref) {
  return (
    <div>
      <input ref={ref} />
      <button onClick={() => ref.current.focus()}>focus</button>
    </div>
  );
});
export default InputField;

上面的代码按预期工作，点击按钮聚焦输入字段。但是我得到2个打字错误
"" ref "可能为" null "。"
类型"（（示例：）"上不存在属性"current"HTML输入元素|空）=〉无效）|可变引用对象〈HTML输入元素|属性"current"在类型"（示例：HTML输入元素|空）=〉空'。
我知道我可以不使用forwardRef而将ref作为RefObject传递给带有props的Fc。但我想使用forwardRef来完成此操作