🎉

【React】コンポーネント間の引数をチェックするPropTypesとは？

2020/12/21に公開

JavaScript

React

tech

アプリが大きくなってくるとコンポーネント間のやり取りが多くなってきます。その時にPropTypesを使うと便利なのでここに使い方をまとめておきます。

PropTypesとは？

PropTypesとは、コンポーネントに渡ってきた引数をチェックするモジュール。アプリが成長してくるとコンポーネント間の受け渡しが煩雑になりやすいです。そのため、不正な値を渡しやすくなりエラーの温床になります。

これを防ぐためにPropsTypesでコンポーネントに渡ってきた引数をチェックします。これにより不正に渡ってきた引数を開発段階で取り除きやすくなるのです。

インストール

まずはprop-typesのインストールが必要です。

yarn add prop-types

必須チェック

まずは必須チェックをしてみましょう。

関数名.PropTypesの中に各引数のチェックを追記していきます。今回の場合、messageプロパティに文字列で必須チェックを追加したいのでPropTypes.string.isRequiredを設定しています。

親コンポーネント

import React from 'react';
import Comp from "./comp"

export default function Index(props) {

  return (
    <div>
      <Comp message="引数が渡ってきた！" />
    </div>
  );
}

子コンポーネント

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

function Comp(props) {

  return (
    <span style={{color:"red"}}>
      {props.message}
    </span>
  );
}

Comp.propTypes = {
  //文字列で必須引数
  message: PropTypes.string.isRequired,
}

export default Comp;

もし、チェックに違反して親コンポーネントからmessageが渡ってきてない場合、JavaScriptのコンソールにエラーメッセージが表示されます。

文字列以外にも

array：配列
bool：真偽値
func：関数
object：オブジェクト
number：数値

などが使えます。

特定の値だけを渡したい

特定の値だけを渡せるように制御したい場合はoneOfを使います。

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

function Comp(props) {

  return (
    <span style={{color:"red"}}>
      {props.message}
    </span>
  );
}

Comp.PropTypes = {
  //特定の値のみ受け付ける
  message: PropTypes.oneOf(["ABC", "XYZ"])
};

export default Comp;

デフォルト値を設定したい

引数が渡って来なかった場合に、デフォルト値を設定できます。