如何在React函数组件中为Interface<T>添加泛型类型T

你当前的代码中，Interface<T>的泛型参数T没有在组件Test上被声明，导致TypeScript无法识别T的类型。要解决这个问题，需要让Test组件本身成为泛型函数组件，具体写法如下：

修正后的代码 #

import React, { ReactElement } from 'react';

interface Interface<T> {
    submit: T;
    children: (ctx: { test: string, info: string }) => React.ReactNode | ReactElement;
}

// 声明泛型组件，将T作为组件的类型参数
const Test = <T,>({ submit, children }: Interface<T>) => {
    return (
        <div>
            {children({ test: '123', info: '3' })}
        </div>
    );
};

关键说明 #

• 不要使用React.FC<Interface<T>>的写法，因为React.FC是固定的泛型类型（仅支持传入props类型），无法直接添加自定义泛型参数。
• 直接将组件定义为泛型函数：<T,>是TypeScript中泛型参数的声明（逗号是为了避免和JSX标签混淆），然后让props的类型为Interface<T>，这样T就可以被正确推导或显式指定。

使用示例 #

当使用Test组件时，你可以显式指定T的类型，或者让TypeScript自动推导：

// 显式指定T为string类型
<Test<string> submit="提交内容">
    {(ctx) => <div>{ctx.test}</div>}
</Test>

// 自动推导T的类型（这里submit是number，所以T为number）
<Test submit={12345}>
    {(ctx) => <div>{ctx.info}</div>}
</Test>

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