如何在React组件Props中传递泛型类型灵活指定options值类型

你的写法存在语法错误的核心原因是：JSX/TypeScript 不支持给单个 props 属性声明独立泛型，也不支持在传参时给单个属性标注泛型参数。正确实现方式是将泛型参数提升到组件和 Props 接口的整体层面。

第一步：定义泛型化的 Props 接口 #

把泛型参数声明在 Props 接口上，用来约束 options 数组中 value 的类型，可以给泛型设置默认值（比如默认string）兼容无显式类型指定的场景：

interface Props<T = string> {
  options: {
    label: string;
    value: T;
  }[];
  // 其余组件属性正常声明即可
}

第二步：声明泛型组件 #

将组件本身声明为泛型函数，泛型参数和 Props 的泛型对齐即可：

// 普通函数写法，无语法歧义
function MyComponent<T = string>(props: Props<T>) {
  // 组件内部可以拿到T的类型提示，比如props.options[number].value的类型就是T
  return (
    <div>
      {props.options.map(opt => (
        <div key={String(opt.value)}>{opt.label}</div>
      ))}
    </div>
  )
}

如果习惯用箭头函数写组件，需要给泛型加extends unknown约束，避免TS把<T>识别为JSX起始标签：

// 箭头函数泛型组件兼容写法
const MyComponent = <T extends unknown = string>(props: Props<T>) => {
  // 组件逻辑同上
  return <div></div>
}

使用方式 #

1. 自动类型推导（最常用） #

不需要手动传入泛型参数，TypeScript 会根据你传入的 options 数组自动推导 value 的类型，当 value 不符合预期时会直接抛出类型错误：

type DominantHand = "RIGHT" | "LEFT"
// TS自动推导出T为DominantHand，若value写错为其他值会报类型错误
<MyComponent
  options={[
    { label: "Right Hand", value: "RIGHT" },
    { label: "Left Hand", value: "LEFT" }
  ]}
/>

type Gender = "MALE" | "FEMALE"
<MyComponent
  options={[
    { label: "Male", value: "MALE" },
    { label: "Female", value: "FEMALE" }
  ]}
/>

2. 显式指定泛型（强约束场景） #

如果需要强制约束 options 的 value 类型，直接在组件名后传入泛型参数即可，不需要给单个options属性加泛型：

// 显式约束value必须是DominantHand类型
<MyComponent<DominantHand>
  options={[
    { label: "Right Hand", value: "RIGHT" },
    { label: "Left Hand", value: "LEFT" }
  ]}
/>

// 显式约束value必须是Gender类型
<MyComponent<Gender>
  options={[
    { label: "Male", value: "MALE" },
    { label: "Female", value: "FEMALE" }
  ]}
/>

补充：如果需要进一步约束T必须是字符串、数字等原始类型，可以给泛型加约束，比如interface Props<T extends string | number = string>，就可以禁止传入对象等复杂类型作为value。

内容的提问来源于stack exchange，提问作者Barry Michael Doyle