Reactjs 如何使用function component和typescript将ref转发到包装的组件

我对ReactJS中Typescript中的forwardRef有问题

我的目标是包装bootstrap FormControl，并提供一些简单的逻辑，然后在此基础上构建。我知道FormControl将其引用转发到输入元素

现在，我如何将组件中的引用转发到FormControl正在转发的引用。我的代码现在如下所示：

import React from "react";
import { Form } from 'react-bootstrap';

export type FormSimpleTextProps = {
    name: string;
    placeholder: string;
    value: string;
    updated: boolean;
    editable: boolean;
    onChange: (name: string, newValue: string) => void;
};

export const FormSimpleText = React.forwardRef(
    (props: FormSimpleTextProps, ref: React.Ref<HTMLInputElement>) => {

        const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
            console.log(e);
        }

        return (
            <Form.Control

               ref={ref}
                name={props.name}
                value={props.value}
                onChange={onChangeHandler}
                className={props.updated ? "selected" : ""}
                plaintext={!props.editable}
                readOnly={!props.editable}
                required
                type="text"
                placeholder={props.placeholder}
            />
        );
    }
);

从“React”导入React；
从'react bootstrap'导入{Form}；
导出类型FormSimpleTextProps={
名称：字符串；
占位符：字符串；
值：字符串；
更新：布尔；
可编辑：布尔型；
onChange：（name:string，newValue:string）=>void；
};
export const FormSimpleText=React.forwardRef(
（props:FormSimpleTextProps，ref:React.ref）=>{
const onChangeHandler=（e:React.ChangeEvent）=>{
控制台日志（e）；
}
返回(
);
}
);

在ref={ref}的行中，我得到一个错误：

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>>): FormControl<"input">', gave the following error.
    Type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
      Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
        Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string & ((instance: HTMLInputElement | null) => void)'.
          Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string'.
  Overload 2 of 2, '(props: ReplaceProps<"input", BsPrefixProps<"input"> & FormControlProps>, context?: any): FormControl<"input">', gave the following error.
    Type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
      Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(string & ((instance: HTMLInputElement | null) => void)) | (string & RefObject<HTMLInputElement>) | (((instance: FormControl<"input"> | null) => void) & ((instance: HTMLInputElement | null) => void)) | ... 4 more ... | undefined'.
        Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string & ((instance: HTMLInputElement | null) => void)'.
          Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'string'.  TS2769

    20 |         return (
    21 |             <Form.Control
  > 22 |                 ref={ref}
       |                 ^
    23 |                 name={props.name}
    24 |                 value={props.value}
    25 |                 onChange={onChangeHandler}

没有与此调用匹配的重载。
重载2中的第1个'（props:Readonly）：FormControl'给出了以下错误。
类型“（（实例：HTMLInputElement | null）=>void）|重新对象| null”不可分配给类型“（string&（（实例：HTMLInputElement | null）=>void））（string&ReObject）|（（（实例：FormControl | null）=>void）&（（实例：HTMLInputElement | null）=>void））|。。。4更多…|“未定义”。
Type'（实例：HTMLInputElement | null）=>void'不可分配给Type'（string&（（实例：HTMLInputElement | null）=>void））（string&reObject）|（（（实例：FormControl | null）=>void）和（（实例：HTMLInputElement | null）=>void）|。。。4更多…|“未定义”。
类型“（实例：HTMLInputElement | null）=>void”不可分配给类型“string&（（实例：HTMLInputElement | null）=>void）”。
类型“（实例：HTMLInputElement | null）=>void”不可分配给类型“string”。
重载2/2'（props:ReplaceProps，context？：any）：FormControl'，出现以下错误。
类型“（（实例：HTMLInputElement | null）=>void）|重新对象| null”不可分配给类型“（string&（（实例：HTMLInputElement | null）=>void））（string&ReObject）|（（（实例：FormControl | null）=>void）&（（实例：HTMLInputElement | null）=>void））|。。。4更多…|“未定义”。
Type'（实例：HTMLInputElement | null）=>void'不可分配给Type'（string&（（实例：HTMLInputElement | null）=>void））（string&reObject）|（（（实例：FormControl | null）=>void）和（（实例：HTMLInputElement | null）=>void）|。。。4更多…|“未定义”。
类型“（实例：HTMLInputElement | null）=>void”不可分配给类型“string&（（实例：HTMLInputElement | null）=>void）”。
类型“（实例：HTMLInputElement | null）=>void”不可分配给类型“string”。TS2769
20 |返回(
21 | 22 | ref={ref}
|                 ^
23 | name={props.name}
24 | value={props.value}
25 | onChange={onChangeHandler}

---

根据错误消息，我无法找出这里的错误。这对我来说太复杂了。有人能在这个示例中提供帮助吗？

我可能错了，但forwardRef的类型定义看起来可疑。可以尝试使用React.forwardRef（（props，ref）。。。。。