React / Flow / Stateless Component の DefaultProps

Shunsuke Sawada

Destructuring assignment を使ってデフォルト値をセットできると Flow のドキュメントに書いてある。

Adding types to React functional components
https://flow.org/en/docs/frameworks/react/#toc-adding-types-to-react-functional-components

React はこんな感じ。

jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// @flow

type Props = {
  value:        string,
  placeholder?: string,
};

const MyInputText = ({ value, placeholder = '' }: Props): ReactElement<*> => (
  <View>
    <TextInput
      placeholder={placeholder}
      value={value}
    />
  </View>
);

export default MyInputText;

  
ただ、これでも Airbnb の Eslint ルールを使っていると、defaultProps がないと怒られるので、無効にした。 Flow と Eslint はたまに喧嘩する。

.eslintrc.json
1
2
3
4
5
{
  "rules" {
    "react/require-default-props": 0
  }
}
Shunsuke Sawada

おすすめの記事

React Native / React Navigation を Mobx と使う
爆速でウェブアプリを公開する方法(無料でSSL独自ドメイン)/ React + Typescript + Cloud Function + Firebase Hosting
Gitのコマンドを自動補完する