在 React Typescript 函数组件中声明泛型答案

【问题标题】：Declaring Generics in React Typescript Function Component在 React Typescript 函数组件中声明泛型
【发布时间】：2021-01-12 19:19:19
【问题描述】：

我正在开发一个 TypeScript React 组件，它的 props 也采用泛型类型，所以我将 React 组件声明为

export interface MyCompProps<T> {
  items: T[];
  labelFunction: (T) => string;
  iconFunction: (T) => JSX.Element;
}


export const MyComp: FunctionComponent<MyCompProps<T>> = (props: MyCompProps<T>) => {
  // rendering logic goes here
}

显然，TypeScript 编译器做得不好。实现该目标的正确语法是什么？

【问题讨论】：

标签： reactjs typescript generics react-typescript

【解决方案1】：

这里是示例，您需要填写您的附加属性。

import React,{FC} from 'react';
    export interface MyCompProps<T> {
      items: T[];
      labelFunction: (T) => string;
      iconFunction: (T) => JSX.Element;
    }
    export interface MyModel {
      //all your properties
    }
    
    export const MyComp: FC<MyCompProps<MyModel>> = (props: MyCompProps<MyModel>) => {
     
      return (<div>sd</div>)
    }

【讨论】：

虽然这有效，但它需要 MyComp 提供具体类型。目标是允许 MyComp 在实例化为组件时与数据类型一起使用，例如 items=[people] />

【解决方案2】：

你可以这样做

const MyComponent = <T,>({items}: Props): JSX.Element => {
  return <div>Hi</div>
}

并以这种方式使用它

<MyComponent<IPerson> items={people} />

【讨论】：