React / Flow / Stateless Component の DefaultProps

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
  }
}

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた