PropTypesでpropsのデータ型を指定する #React

はじめに

Reactでは、型チェックによるミスが思いもよらないバグの温床になることがあります。
それをprops-typesライブラリを使うことで防ぐことができます。

Greeting.js

import React from 'react';
import PropTypes from 'prop-types';

function Greeting(props) {
  return(
    <div>Hi {props.name}</div>
  );
}

Greeting.propTypes = {
  name: PropTypes.string
};

export default Greeting;

1. PropTypesをインポートする

import PropTypes from 'prop-types';

2. コンポーネントに対してpropTypesを使う

コンポーネント.propTypes = {
  props名: PropTypes.データ型
};

Greeting.propTypes = {
  name: PropTypes.string
};

ここでは、nameに文字列を指定している。

参考

公式ドキュメント