如何向React组件传递泛型并在组件内部正确使用该泛型

你原有的两个接口定义本身语法完全正确，报错来源于泛型作用域和组件声明方式的错误，核心问题有两点：

• 直接写React.FC<MyComponentProps<T>>时，外层作用域没有声明泛型参数T，TS无法识别该泛型的来源
• onChangeHandler不需要单独声明独立的泛型参数，它接收的选项类型和组件本身的泛型直接绑定，重复声明泛型会触发类型参数数量不匹配的报错

完整正确代码 #

接口定义（无需修改原有逻辑） #

interface MyInterfaceXYZ<T> {
    displayName: string
    value: T
}

interface MyComponentProps<T> {
    myFunctionThatTakesMyGeneric: (value: T) => void
    options: MyInterfaceXYZ<T>[]
}

泛型组件实现 #

泛型组件需要把泛型参数声明在组件函数本身，让整个组件作用域可以复用该类型，不需要依赖React.FC的类型标注也能获得完整的类型提示：

// <T,> 里的逗号是TSX语法兼容写法，避免TS把尖括号识别为JSX标签
const InputSelect = <T,>({
    myFunctionThatTakesMyGeneric,
    options,
}: MyComponentProps<T>) => {

    // 直接复用组件层面的泛型T，不需要给处理函数单独声明泛型
    function onChangeHandler(option: MyInterfaceXYZ<T>) {
        myFunctionThatTakesMyGeneric(option.value)
    }

    return (
        <>
            <myElement onChange={onChangeHandler}>
                Blah blah!
            </myElement>
        </>
    )
}

如果你习惯显式标注组件类型，可以用泛型函数类型替代普通的React.FC，写法如下，内部逻辑完全不变：

const InputSelect: <T>(props: MyComponentProps<T>) => JSX.Element = ({
  myFunctionThatTakesMyGeneric,
  options
}) => {
  // 组件内部逻辑和上文一致
}

类型自动推断效果 #

使用组件时TS会自动根据传入的options和回调函数推断泛型T的实际类型，不需要手动传入泛型参数：

// T自动推断为string类型
<InputSelect
  myFunctionThatTakesMyGeneric={(val) => console.log(val.toUpperCase())}
  options={[
    {displayName: "选项1", value: "v1"},
    {displayName: "选项2", value: "v2"}
  ]}
/>

// T自动推断为number类型
<InputSelect
  myFunctionThatTakesMyGeneric={(val) => console.log(val.toFixed(2))}
  options={[
    {displayName: "选项A", value: 1},
    {displayName: "选项B", value: 2}
  ]}
/>

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