React - 在组件中使用forwardRef，打字稿错误 - 缺少属性“current”

Question

我很难理解为什么打字稿编译器对我在组件中使用的forwardRef不满意。

对于下面的示例，我已将代码精简为最基本的内容，确保此打字稿错误是代码中唯一出现的错误，根据我的实际代码中的问题：

import { createRef, forwardRef, RefObject } from 'react';

const MyComponent = () => {
    const selectCountryRef = createRef<HTMLSelectElement>();

    return (
        <div>
            <SelectCountry ref={selectCountryRef} />
        </div>
    );
};

const SelectCountry = forwardRef((ref?: RefObject<HTMLSelectElement>) => {
    return (
        <FormFieldSelect ref={ref} />
    );
});

const FormFieldSelect = ({ ref }) => {
    return (
        <div>
            <select ref={ref}>
            </select>
        </div>
    );
};

当尝试编译这个时，我收到错误：

Property 'current' is missing in type '{ ref: RefObject<HTMLSelectElement>; }' but required in type 'RefObject<HTMLSelectElement>'.

在 VSCode 中，<SelectCountry ...IDE 有一个抱怨，确切的消息是：

const SelectCountry: ForwardRefExoticComponent<RefObject<HTMLSelectElement> & RefAttributes<unknown>> Property 'current' is missing in type '{ ref: RefObject<HTMLSelectElement>; }' but required in type 'RefObject<HTMLSelectElement>'.ts(2741) index.d.ts(85, 18): 'current' is declared here.

我只是不明白为什么会出现此错误。

目前使用React 17.0.2

Answer 1

尝试以下操作。我添加了 auseEffect和 aconsole.log以MyComponent表明它正在工作。ref?: RefObject<HTMLSelectElement>我对您的分配方式感到困惑SelectCountry，并认为这是导致错误的原因。我已经展示了如何forwardRef在代码片段中分配类型，即forwardRef<RefElementType,ComponentPropsType>。也FormFieldSelect必须是一个forwardRef组件。

import React, { useEffect, createRef, forwardRef } from 'react'

export const MyComponent = () => {
  const selectCountryRef = createRef<HTMLSelectElement>()

  useEffect(() => {
    console.log(selectCountryRef.current)
  }, [selectCountryRef])

  return (
    <div>
      <SelectCountry ref={selectCountryRef} />
    </div>
  )
}

interface SelectCountryProps {}

const SelectCountry = forwardRef<HTMLSelectElement, SelectCountryProps>(
  (props, ref) => {
    return <FormFieldSelect ref={ref} />
  },
)

interface FormFieldSelectProps {}

const FormFieldSelect = forwardRef<HTMLSelectElement, FormFieldSelectProps>(
  (props, ref) => {
    return (
      <div>
        <select ref={ref}></select>
      </div>
    )
  },
)