我无法在 typescript 中使用 useRef 钩子正确输入 ref

Question

我正在尝试将 ref 从父组件（EditableCell）传递给子组件（输入），并在单击父组件时使用其.current.focus 属性。

我正在使用打字稿的forwardRef 函数，但我无法正确输入它

interface Props {
  // Some props type
}

const CellEditable = (props: Props) => {
  const [isEditing, setEditing] = useState<boolean>(false)
  const inputRef = useRef<HTMLInputElement>(null)

  const handleClick = () => setEditing(!isEditing)

  const opts = {
    ref: inputRef,
    value: props.value,
    onChange: props.onChange
  }

  return (
    <div onClick={handleClick}>
      {
        isEditing
        ? <InputText {...opts} />
        : <div>{props.value}</div>
      }
    </div>
  )
}

interface Props {
  // Some props type
}

type Ref = HTMLInputElement

const InputText = forwardRef((props: Props, ref: Ref) => {
  useEffect(() => {
    ref?.current?.focus()
  })
  
  return (
    <input
      type='text'
      ref={ref}
      value={props.value}
      onChange={props.onChange}
    />
  )
})

使用上面的代码，我得到以下错误：

Argument of type '(props: Props, ref: Ref) => JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, Props>'.
  Types of parameters 'ref' and 'ref' are incompatible.
    Type '((instance: unknown) => void) | MutableRefObject<unknown> | null' is not assignable to type 'HTMLInputElement'.
      Type 'null' is not assignable to type 'HTMLInputElement'.  TS2345

如果我用泛型输入forwardRed，我会得到另一种错误：

const InputText = forwardRef<Ref, Props>((props, ref) => { ... }

Property 'current' does not exist on type '((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>'.
  Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void'.  TS2339

最后，将 ref 输入为 any 不会出错。

我是 Typescript 新手，不明白上面提到的错误。

Answer 1

查看以下沙盒：https://codesandbox.io/s/aged-night-3pwjs。

TypeScript 警告您，您的 ref 可能为 null，因此任何带有 ref.current 的代码都应该用 if 语句包装，这将确保 ref.current 存在。