React Component における default props と props types の指定方法

default props

props を使用している React Component で props が渡されたなかった場合のフォールバックとして default props を指定する事ができます。
default props は、 [コンポーネント名].defaultProps = {}と指定します。
(functional component でも同様の指定)

import React, { Component } from 'react'

class User extends Component {
  render() {
    const {name, age} = this.props

    return (
      <dl>
        <dt>Name: </dt>
        <dd>{name}</dd>
        <dt>age: </dt>
        <dd>{age}</dd>
      </dl>
    )
  }
}

User.defaultProps = {
  name: 'no name',
  age: '-'
}

const App = () => {
  return (
    <div id="app">
      <User name="taro" age="20" />
      <User />
    </div>
  )
}

export default App

props types

React Component に渡される props の型チェックや必須チェックを prop-types モジュールを用いて行います。 github.com

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class User extends Component {
  render() {
    const {name, age} = this.props

    return (
      <dl>
        <dt>Name: </dt>
        <dd>{name}</dd>
        <dt>age: </dt>
        <dd>{age}</dd>
      </dl>
    )
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([ // 複数の型を許容する場合
    PropTypes.string,
    PropTypes.number,
  ])
}

const App = () => {
  return (
    <div id="app">
      <User name="taro" age="20" />
    </div>
  )
}

export default App