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