React+TS封装可复用Input组件类型不兼容报错的TS修复方案

错误原因解析 #

你遇到的类型错误源于三个核心问题：

1. 自定义Props中错误声明了ref: string——React的ref是特殊属性，无需在Props中显式定义，且类型完全不匹配；
2. Ant Design的Input组件ref类型为InputRef（而非原生HTMLInputElement），你在ForwardRefRenderFunction中指定的泛型参数不符合组件实际类型；
3. JSX语法错误：ref={ref}被错误放置在Input标签的闭合标签外，导致结构异常。

具体解决步骤 #

1. 导入Antd Input的类型定义 #

从antd导入适配的Props和Ref类型，替换原生HTML属性类型：

import React, { ForwardRefRenderFunction } from 'react'
import { Input, InputProps as AntdInputProps, InputRef } from 'antd';

2. 修正自定义Props接口 #

移除错误的ref声明，直接继承Antd Input的属性规范：

interface InputTextFieldProps extends AntdInputProps {
    name: string;
    label: string;
}

3. 调整ForwardRef泛型参数 #

将ForwardRefRenderFunction的第一个泛型参数改为InputRef，匹配Antd Input的ref类型：

const InputTextField: ForwardRefRenderFunction<InputRef, InputTextFieldProps> = ({ name, label, ...props }, ref) => {
    return (
        <label>
            {label}
            <Input
                className='formInput'
                {...props}
                name={name}
                ref={ref} // 修正语法：将ref放在标签属性内部
            />
        </label>
    );
};

4. 保持forwardRef的正确使用 #

const InputField = React.forwardRef(InputTextField);

export default InputField

完整修正代码 #

import React, { ForwardRefRenderFunction } from 'react'
import { Input, InputProps as AntdInputProps, InputRef } from 'antd';

interface InputTextFieldProps extends AntdInputProps {
    name: string;
    label: string;
}

const InputTextField: ForwardRefRenderFunction<InputRef, InputTextFieldProps> = ({ name, label, ...props }, ref) => {
    return (
        <label>
            {label}
            <Input
                className='formInput'
                {...props}
                name={name}
                ref={ref}
            />
        </label>
    );
};

const InputField = React.forwardRef(InputTextField);

export default InputField

内容的提问来源于stack exchange，提问作者ch-ru