React + FlowtypeでStateless Functionsなコンポーネントを作る

Stateless Functionsなコンポーネントとは

ザックリ書くとただJSXを返すだけのコンポーネントです。

import React from 'react';
const Item = (prop) => (
  <div>{props.title}</div>
);

こんな感じ。

handleXXXXのようなfunctionを持つComponentクラスをextendしたものは内部でstateが変わるのでstatelessではないですね。

propをflowtypeで検証する

functionとして書くので、flowでの検証も同様になります。

// @flow
import React from 'react';
type Props = {
  title: string,
  handleClick: Function,
};

const Item = ({title, handleClick}: Props) => (
  <div onClick={handleClick}>{props.title}</div>
);

PropTypesとの併用時の注意点

PropTypesからの切り替え時にどっちも書かれている場所が出ることもあるかなと思います。

そんな時は、ESLintのreact/default-props-match-prop-typesに要注意です。

// @flow
import React from 'react';
import PropTypes from 'prop-types';
type Props = {
  title: string,
  handleClick: Function,
};

const Item = ({title, handleClick}: Props) => (
  <div onClick={handleClick}>{props.title}</div>
);

Item.propTypes = {
  title: PropTypes.string,
  handleClick: PropTypes.func.isRequired,
}
Item.defaultProps = {
  title: 'no title'
}

こんな感じでFlowで型定義してるものに対してdefaultPropsを設定すると怒られます。

29:3  error  defaultProp "title" defined for isRequired propType  react/default-props-match-prop-types

@flowしたコンポーネントにPropTypesは要らない

FlowTypeがあればPropTypes要らないので、大人しく消しちゃいましょう。

// @flow
import React from 'react';
type Props = {
  title: string,
  handleClick: Function,
};

const Item = ({title = 'no title', handleClick}: Props) => (
  <div onClick={handleClick}>{props.title}</div>
);