Компоненты высшего порядка

Популярный в React шаблон — это шаблон компонентов высшего порядка, поэтому важно, чтобы мы могли предоставлять эффективные типы для компонентов высшего порядка в Flow. Если вы ещё не знаете, что такое компонент высшего порядка, перед продолжением обязательно прочитайте документацию React по компонентам высшего порядка.

Для аннотирования компонентов высшего порядка можно использовать типы компонентов.

Простейший HOC​

Начнём с самого простого HOC:

import * as React from 'react';


function trivialHOC<Config extends {...}>(
  Component: component(...Config),
): component(...Config) {
  return Component;
}

Это базовый шаблон, по которому могут быть устроены ваши HOC. Во время выполнения этот HOC вообще ничего не делает. Рассмотрим более сложные примеры.

Передача свойств​

Распространённый вариант использования компонентов высшего порядка — передача свойства. HOC автоматически задаёт свойство и возвращает компонент, которому это свойство больше не требуется. Например, рассмотрим свойство навигации. Как задать для него тип?

Чтобы удалить свойство из конфигурации, можно взять компонент, который включает это свойство, и вернуть компонент, который его не включает. Лучше всего создавать такие типы с помощью синтаксиса распространения свойств объектов.

import * as React from 'react';


type InjectedProps = {foo: number}


function injectProp<Config extends {...}>(
  Component: component(...{...Config, ...InjectedProps, ...})
): component(...Config) {
  return function WrapperComponent(
    props: Config,
  ) {
    return <Component {...props} foo={42} />;
  };
}


function MyComponent(props: {
  a: number,
  b: number,
  ...InjectedProps,
  ...
}): React.Node {}


const MyEnhancedComponent = injectProp(MyComponent);


// We don't need to pass in `foo` even though `MyComponent` requires it:
<MyEnhancedComponent a={1} b={2} />; // OK


// We still require `a` and `b`:
<MyEnhancedComponent a={1} />; // ERROR

Экспорт обёрнутых компонентов​

При попытке экспортировать обёрнутый компонент вы, скорее всего, столкнётесь с ошибкой об отсутствии аннотации:

import * as React from 'react';


function trivialHOC<Config extends {...}>(
  Component: component(...Config),
): component(...Config) {
  return Component;
}


type Props = Readonly<{bar: number, foo?: number}>;


function MyComponent({bar, foo = 3}: Props): React.Node {}


export const MyEnhancedComponent = trivialHOC(MyComponent); // ERROR

Добавить аннотацию к экспортируемому компоненту можно с помощью типов компонентов:

import * as React from 'react';


function trivialHOC<Config extends {...}>(
  Component: component(...Config),
): component(...Config) {
  return Component;
}


type Props = Readonly<{bar: number, foo?: number}>;


function MyComponent({bar, foo = 3}: Props): React.Node {}


export const MyEnhancedComponent: component(...Props) = trivialHOC(MyComponent); // OK

См. также​

• Обобщённые типы — в шаблонах HOC активно используются обобщённые параметры типов
• Функции — HOC — это функции, которые принимают компоненты и возвращают компоненты
• Требование аннотаций — для экспортируемых HOC обычно требуются аннотации типов