如何为React.FC传递泛型？泛型组件类型定义方法

你当前的代码写法存在问题：React.FC<CompPropsType2<T>>里的T未被声明为组件的泛型参数，TypeScript无法识别这个未定义的类型。正确的做法是让组件本身成为泛型函数，具体实现如下：

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

放弃使用React.FC，直接声明带泛型参数的组件函数，TypeScript可以正确推断或接收显式传入的T类型：

type CompPropsType2<T> = {
  // 其他自定义字段
  fieldOne: T[]
  callbackTwo: (data: T[]) => void
}

export function Comp2<T>(props: CompPropsType2<T>) {
  const handleClick = () => {
    // 数据生成逻辑
    const data = [] as T[]
    props.callbackTwo(data)
  }

  return <h1 onClick={handleClick}>hello</h1>
}

使用示例 #

• 自动推断类型：传入fieldOne时，TypeScript会自动推导T的类型

  <Comp2 
    fieldOne={[1, 2, 3]} 
    callbackTwo={(data) => console.log(data)} // data自动推断为number[]
  />
  

• 显式指定类型：需要明确约束T时，手动传入类型参数

  interface User {
    id: number
    name: string
  }
  
  <Comp2<User>
    fieldOne={[{id: 1, name: "Alice"}]}
    callbackTwo={(users) => console.log(users)} // users为User[]类型
  />
  

可选写法：结合React.FC使用（不推荐） #

若一定要保留React.FC，需通过函数类型定义让它支持泛型，但这种写法会隐含children属性（可能不符合需求）：

type CompPropsType2<T> = {
  // 其他自定义字段
  fieldOne: T[]
  callbackTwo: (data: T[]) => void
}

export const Comp2: <T>(props: CompPropsType2<T>) => React.ReactElement = (props) => {
  const handleClick = () => {
    const data = [] as T[]
    props.callbackTwo(data)
  }

  return <h1 onClick={handleClick}>hello</h1>
}

核心说明 #

• 泛型参数T必须在组件函数的参数列表前声明（如function Comp2<T>(...)），才能被CompPropsType2<T>引用
• 推荐使用第一种写法，React.FC的隐含children属性可能引发意外的类型问题，直接定义函数组件更清晰可控

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