Использование Flowtype с декорированными компонентами react-css-modules

Ниже приведен простой компонент для отображения сообщений об ошибках:

// @flow
import styles from 'styles/components/Error';
import React from 'react';
import CSSModules from 'react-css-modules';

type Props = {
  message: string
}

const Error = ({ message }: Props) => {
  return (
    <div styleName="error">
      {message}
    </div>
  );
};

export default CSSModules(Error, styles);

Обратите внимание, что для этого требуется свойство message. Теперь, если я использую этот компонент где-нибудь:

<Error />;

Flowtype должен предупредить меня, что Error отсутствует обязательное свойство message, но это не так. Если я не оберну свой компонент Error модулями react-css, Flowtype будет работать как положено.

Я думаю, что мне нужно объявить тип для Flowtype, чтобы он понимал завернутые компоненты, но мое гугл-фу не дало никаких результатов.

Что я нашел:


reactjs javascript flowtype react-css-modules
person pikku-h    schedule 03.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это недавно обсуждалось на GitHub. Вот соответствующая проблема: https://github.com/facebook/flow/issues/2536

Короче говоря, проблема в том, что Flow не имеет никакой информации о типе для функции CSSModules, поэтому возвращаемый тип выводится как any.

Другими словами:

export default Error; // the type of this export is (_: P) => ?React$element<any>
export default CSSModules(Error, styles); // the type of this export is any

Короче говоря, вы можете предоставить собственное определение типа. Я вставлю сюда вариант, предложенный @gcanti в исходном выпуске:

declare module 'react-css-modules' {

  declare type CssOptions = {
    allowMultiple?: boolean,
    errorWhenNotFound?: boolean,
  };

  declare type FunctionComponent<P> = (props: P) => ?React$Element<any>;
  declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;

  declare function exports<D, P, S, C: ClassComponent<D, P, S> | FunctionComponent<P>>(reactClass: C, styles: Object, cssOptions?: CssOptions): C;
}

Сохраните вышеуказанное в decls/react-css-modules.js или что-то подобное, а затем настройте свой .flowconfig следующим образом:

[libs]
decls/.js

Это позволит сохранить информацию о типе при переносе компонента в CSSModules и позволит потоку перехватывать предполагаемые ошибки.

person Gabriele Petronella    schedule 03.10.2016