如何在React函数组件（FC）中使用带类型参数的Props定义组件？

你需要定义一个接收泛型参数的React函数组件，同时保留FC类型的话，有两种可行的写法：

写法一：直接声明泛型函数并指定FC兼容类型 #

import React, { JSX } from 'react';

// 泛型Props定义
type MyProps<T> = {
  queryResult:
    | { loading: true }
    | { loading: false, data: T };
  dataToString: (x: T) => string;
};

// 泛型组件实现
const MyComp: <T>(props: MyProps<T>) => JSX.Element = ({ dataToString, queryResult }) => {
  if (queryResult.loading) return <PrettySpinner />;
  return <PrettyDisplay text={dataToString(queryResult.data)} />;
};

这种写法直接将组件标注为泛型函数，返回值符合FC的要求（返回JSX.Element），同时明确接收绑定泛型T的MyProps<T>作为参数。

写法二：基于FC定义泛型组件类型 #

如果你想更贴合FC的写法，可以先定义泛型组件类型，再实现组件：

import React, { FC } from 'react';

type MyProps<T> = {
  queryResult:
    | { loading: true }
    | { loading: false, data: T };
  dataToString: (x: T) => string;
};

// 定义泛型FC类型
type GenericResultDisplay<T> = FC<MyProps<T>>;

// 实现泛型组件
const MyComp: GenericResultDisplay<any> = ({ dataToString, queryResult }) => {
  if (queryResult.loading) return <PrettySpinner />;
  return <PrettyDisplay text={dataToString(queryResult.data as any)} />;
};

这种写法需要临时用any或类型断言，不如第一种直接，推荐优先使用写法一。

你之前的写法无效原因 #

• 第一种尝试const MyComp: <T,> FC<MyProps<T>> =不符合TypeScript泛型函数类型定义规则，无法直接在类型标注中声明泛型参数并绑定到FC的泛型上。
• 第二种尝试的as FC<MyProps<T>>断言无效，因为T在断言位置属于未定义的泛型参数，TypeScript无法推断其具体类型。

组件使用示例 #

定义好泛型组件后，可针对不同类型实例化使用：

// number类型实例
<MyComp
  queryResult={{ loading: false, data: 123 }}
  dataToString={(num) => num.toFixed(2)}
/>

// string类型实例
<MyComp
  queryResult={{ loading: false, data: "hello" }}
  dataToString={(str) => str.toUpperCase()}
/>

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