Блог

Главная - Вопросы по программированию - Объявление дженериков в функциональном компоненте React Typescript

Объявление дженериков в функциональном компоненте React Typescript

#reactjs #typescript #generics #react-typescript

#reactjs #typescript #дженерики #react-typescript

Вопрос:

Я работаю над компонентом TypeScript React, реквизиты которого также имеют общий тип, поэтому я объявляю компонент 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. Каков был бы правильный синтаксис для достижения этой цели?

Ответ №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>)
    }

Комментарии:

1. Хотя это работает, для этого требуется, чтобы MyComp предоставлял конкретный тип. Цель состоит в том, чтобы разрешить использование MyComp с типами данных при создании экземпляра в качестве компонента, например <MyComp<IPerson> items=[people] />

Ответ №2:

Вы можете сделать что-то вроде этого

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

И используйте его таким образом

 <MyComponent<IPerson> items={people} />
Метки: