如何将带泛型与静态属性的React类组件转为函数组件并正确定义TS类型

错误原因 #

你原来的写法存在两个核心问题：

1. 给InputBox标注的React.FunctionComponent<IInputBoxProps<any>>是固定泛型的函数类型，和你实际写的带动态泛型T的函数签名不匹配，触发了类型系统的构造函数类型校验报错。
2. 把displayName、defaultProps等静态属性赋值写到了组件函数体内部，组件每次渲染都会重复执行赋值逻辑，不符合静态属性的定义逻辑。

正确实现代码 #

方案1：手动声明泛型组件类型（推荐） #

不需要用React.FC，直接定义泛型函数类型，外部赋值静态属性：

// 定义泛型组件的类型签名
type TInputBox = <T extends string | number | undefined = undefined>(
  props: IInputBoxProps<T>
) => React.ReactElement | null;

// 实现组件
export const InputBox: TInputBox = (props) => {
  // 组件内部渲染逻辑
  // ... rest of component
};

// 外部赋值静态属性
InputBox.displayName = "InputBox";
InputBox.defaultProps: Partial<IInputBoxProps<string | number>> = {
  disabled: false,
  rightAligned: false,
  id: "",
  keySelectIndex: 0,
};

方案2：用默认参数替代defaultProps（React 18+推荐） #

官方已经不推荐使用defaultProps，直接用函数参数默认值即可，不需要额外处理静态属性，类型自动推导：

export const InputBox = <T extends string | number | undefined = undefined>(
  props: IInputBoxProps<T>
) => {
  // 解构时直接给默认值
  const {
    disabled = false,
    rightAligned = false,
    id = "",
    keySelectIndex = 0,
    ...restProps
  } = props;
  // 组件内部渲染逻辑
  // ... rest of component
};

InputBox.displayName = "InputBox";

核心问题解答 #

1. 什么是构造函数类型？ #

TypeScript中构造函数类型是指支持通过new关键字调用生成实例的类型，签名格式为new (...args: any[]) => any。你遇到的报错是因为固定泛型的React.FunctionComponent签名和你实际的泛型函数不匹配，类型系统误将其识别为需要new调用的构造函数类型，和普通函数组件的签名冲突。

2. 函数构造器和类构造器的区别？ #

• 类构造器：属于类的内置方法，必须通过new关键字调用，调用时自动生成类的实例对象，this指向生成的实例，继承逻辑基于原型链实现。
• 函数构造器：本质是普通JS函数，既可以直接调用，也可以通过new调用，new调用时会生成普通对象作为返回实例。
  React类组件本身是ES6类，属于构造函数类型；而函数组件是普通渲染函数，不需要new调用，不属于构造函数类型，这是报错的核心诱因。

3. 函数组件的静态属性定义方式？ #

静态属性是挂载到函数本身的属性，不属于组件渲染逻辑的一部分，不要写到组件函数体内，要在函数定义完成后在外部赋值。如果需要提前声明静态属性的类型，可以通过接口合并的方式提前定义好组件的完整类型再做类型断言。

内容的提问来源于stack exchange，提问作者Kulio