Универсальный тип реквизита стрелка

Меня немного смущают «закулисные» действия следующего синтаксиса const MyComponent: FC<RouteComponentProps> = ({history}) => { }; Я видел много таких примеров и понимаю, что он устанавливает тип FC<RouteComponentProp> для объекта MyComponent передаваемого в MyComponent .

Я, однако, смущен - могу ли я получить тот же логический результат типа реквизита с другим синтаксисом? Могу ли я написать что-то вроде -

const MyComponent = (FC<RouteComponentProps>:{}) => {} .

Пожалуйста, спасибо.

Всего 1 ответ


Вот определение FC или FunctionComponent:

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

Так что, если вам важны только реквизиты и тип возвращаемых данных, вы можете повторить это так:

import React, { PropsWithChildren } from 'react'

// ...

const MyComponent = (props: PropsWithChildren<RouteComponentProps>): ReactElement | null => {

}

PropsWithChildren - это вспомогательный тип, который добавляет в стандартную дочернюю структуру реагировать проп, который разрешено использовать всем компонентам. PropsWithChildren<RouteComponentProps> совпадает с RouteComponentProps & { children?: ReactNode }


Но, как вы видели в определении для FunctionComponent, происходит нечто большее, чем просто реквизит. Компоненты могут иметь ряд статических свойств. propTypes и displayName используются для разработки и отладки, contextTypes используется для старого API контекста, а defaultProps - это способ сделать значения по умолчанию для реквизита.

Вы можете использовать их не часто, но это возможно, и если вы когда-нибудь захотите их использовать, вам нужно обновить свой тип, чтобы разрешить их. Или просто используйте FC<RouteComponentProps> и получите все это из коробки.


Есть идеи?

10000