React PropTypesの設定

PropTypesとは

props（プロパティ）のチェックを行うものです。

※React入門はこちらからどうぞ

※こちらはUdemy
での学習メモです。

サンプルプログラム（型チェック）

import React, { Component } from 'react';
// ① PropTypesをimportしてください。
import PropTypes from 'prop-types';

const App = () => {
  // 画面に表示する内容を配列で定義
  const testArr = [
     {title: "name1", number: 1},
     {title: "name2", number: 3},
     {title: "name3"}
  ]
    return (
         // map()関数を用いて配列をLoop
         testArr.map((val) => {
           // 下で定義したComponent_test()を呼び出す。引数には配列の内容を指>定         
           return <Component_test props1={val.title} props2={val.number}/>
         })
    )
//  }

}

const Component_test = (val) => {
        // propsを受け取ってHTMLをreturn
        return <div>{val.props1}, {val.props2}</div>
}
Component_test.defaultProps = {
  // propsがない場合の初期値を設定
  props2: "default"
}
Component_test.propTypes = {
  // "props2"というpropsの型チェック
  props2: PropTypes.number
}

export default App;

↑では、２番目の引数props2が数値型であることをチェックしています。

以下のコマンドを実行して画面表示確認

% yarn start

３行目の引数が設定されていない配列がデフォルト値：”default”という文字列になっているため、コンソールに以下の様なワーニングメッセージが表示されています。

index.js:1 Warning: Failed prop type: Invalid prop `props2` of type `string` supplied to `Component_test`, expected `number`.

サンプルプログラム（必須チェック）

Component_test.defaultProps = {
  // propsがない場合の初期値を設定
//  props2: 99999
}
Component_test.propTypes = {
  // "props2"というpropsの型チェック
  props2: PropTypes.number.isRequired
}

↑のチェックに「isRequired」を追記し、一時的にデフォルト値の記述をコメントアウト（無効化）します。

３行目にprops2の値が設定されていないため、コンソールに以下の様なワーニングメッセージが出力されています。

Warning: Failed prop type: The prop `props2` is marked as required in `Component_test`, but its value is `undefined`.