Блог

Я учусь использовать React-TypeScript, и меня смущает, как Реагировать.ФК и дженерики работают вместе.

Итак, у меня есть пара вопросов, связанных с приведенным ниже кодом (функциональный компонент, возвращающий элемент списка).:

1.) Нужно ли передавать реквизит как универсальный? Или вы могли бы просто написать

 const TodoListItem: React.FC = (props) => {
//code
}
 

2.) Как это todo может быть разрушено из <TodoListItemProps> ?

3.) Почему возвращаемый тип не определен? Разве это не должно быть записано как :

 const TodoListItem: React.FC<TodoListItemProps> = ({todo}):TodoListItemProps
 

Полный код здесь:

 interface TodoListItemProps {
  todo: {
    text:string
    complete:boolean
  }
}

const TodoListItem: React.FC<TodoListItemProps> = ({todo}) => {
  return(
    <li>
      <label>
        {todo.text}
      </label>
    </li>
  )
}
 

Вы можете определить свои функциональные компоненты двумя способами.

Только с добавлением типов в параметры функции:

 const TodoListItem = ({ todo }: TodoListItemProps) => {
  return (
    // ...
  );
};
 

Или добавьте его как общий параметр к FC типу:

 const TodoListItem: React.FC<TodoListItemProps> = ({ todo }) => {
  return(
    // ...
  );
};
 

При использовании этого компонента оба будут работать просто отлично, но FC тип добавляет больше к компоненту. Если вы проверите типы react, вы увидите, что:

 type FC<P = {}> = FunctionComponent<P>;
 

 interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}
 

Итак, из этого вы можете видеть, что FC (или FunctionComponent ) выведет props для компонента (из предоставленного вами общего параметра и расширит его с children помощью prop), добавьте propTypes , contextTypes , defaultProps и displayName статическое поле для компонента.
Если вы их не используете, первый подход является функциональным, но FC тип даст вам больше возможностей для работы с функциональными компонентами.