前口上
Reactコンポーネントの書き方には幾つかあります。状態を持たないコンポーネントはStateless Functional Componentsで書くと、実装の中身を見なくても状態を持たないことを明示できます。なかなか良い書き方ですが、書き方を忘れるので記録を残します。SFCと書くと湘南藤沢キャンパスを思い起こさせる点もちょっと面白いです。
プロパティがない場合
外部から値をうけとらない、固定値を表示するコンポーネントは簡単です。
render相当の関数を定義します。
const Hello = function() {
return <div>Hello SFC</div>
}
アロー関数を使えば
const Hello = () => <div>Hello SFC</div>
と書けます。カジュアルにコンポーネントを作れる点が好きです。
プロパティがある場合
コンポーネントでpropsを使う場合は、関数の引数でDestructuringして受け取ります。
const Hello = ({name}) => <div>Hello {name}</div>
プロパティの型定義をするには
コンポーネント関数にpropTypesプロパティやdefaultPropsプロパティを定義します。
Hello.propTypes = {
name: React.PropTypes.string
}
Hello.defaultProps = {
name: 'SFC'
}