コンポーネントのPropsにデフォルト値を持たせる

デフォルト値について

Reactのコンポーネントを呼び出す時、そのコンポーネントのプロパティとしてPropsを渡すことができます。

呼び出し例

// labelとcheckedがprops
<TodoLabel label="メールを返信する" checked={false} />

この時、コンポーネント側にdefaultPropsというプロパティを定義しておくと、このPropsにデフォルト値をもたせることができます。
デフォルト値を持たせることによって、コンポーネントの呼び出しを柔軟にできたり、Propsが渡されなかった時の実装を楽にすることができます。

defaultPropsとは

下記画像のTodoラベルのコンポーネントを例に解説します。

TodoLabel.jsx

import * as React from 'react';

class TodoLabel extends React.Component {
  render() {
    return (
      <div><input type="checkbox" defaultChecked={this.props.checked} />{this.props.label}</div>
    );
  }
}

// Propsのデフォルト値
TodoLabel.defaultProps = {
  checked: false, // デフォルトはチェックボックスにチェックを入れない
};

export default TodoLabel;

defaultPropsに設定したいプロパティと値を書くことでデフォルト値を定義できます。

この状態で次のように呼び出すと、次の画像の通りになります。

呼び出し例

<TodoLabel label="メールを返信する" />
<TodoLabel label="書類を作る" checked={true} />

Functional Componentの場合

Functional Componentの場合も同様に記述できます。

import * as React from 'react';

const TodoLabel = ({ label, checked }) => {
  return (
    <div><input type="checkbox" defaultChecked={checked} />{label}</div>
  )
}

// Propsのデフォルト値
TodoLabel.defaultProps = {
  checked: false,
};

export default TodoLabel;

Staticプロパティにした書き方

transform-class-propertiesなどのBabel transformを使用している場合はStaticプロパティにした書き方も可能です。
（create-react-appから作った場合、transform-class-propertiesは最初から入っています）

import * as React from 'react';

class TodoLabel extends React.Component {
  // Propsのデフォルト値
  static defaultProps = {
    checked: false,
  };

  render() {
    return (
      <div><input type="checkbox" defaultChecked={this.props.checked} />{this.props.label}</div>
    );
  }
}

export default TodoLabel;