React函数组件(FC)中泛型类型T的声明位置咨询

你当前的代码报错是因为没有在组件层面声明泛型参数T，TypeScript无法识别这个未定义的类型。需要把泛型参数T绑定到组件本身，以下是两种常用的正确写法：

写法一：直接定义泛型组件函数（推荐） #

这种写法避免了React.FC自带的隐含children属性问题，更灵活：

interface MyComponentProps<T> {
  items: T
}

// 把<T>放在函数前面，声明这是一个泛型组件
// 逗号是为了避免与JSX标签语法混淆，TS中无约束泛型建议添加
const MyComponent = <T,>({ items }: MyComponentProps<T>) => {
  // 组件逻辑...
  return <div>{JSON.stringify(items)}</div>
}

写法二：结合React.FC的泛型声明 #

如果你习惯使用React.FC，需要明确把组件标注为泛型函数类型：

interface MyComponentProps<T> {
  items: T
}

// 泛型参数<T>需要在函数类型声明中前置
const MyComponent: <T>(props: MyComponentProps<T>) => React.ReactElement = ({ items }) => {
  // 组件逻辑...
  return <div>{JSON.stringify(items)}</div>
}

使用示例 #

组件使用时，TypeScript会自动根据传入的items类型推导T，也可以手动指定：

// 自动推导T为string[]
<MyComponent items={["apple", "banana"]} />

// 手动指定T为number类型
<MyComponent<number> items={123} />

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