【React】PropTypesに複数のデータ型を指定する

React で、コンポーネントに値を渡す際に PropTypes を利用しているのですが、「数値もしくは Bool 型を渡す」という書き方を使用したので備忘録としてまとめ。
そういえば今まで、渡すデータの型ががっちりと決まっていたので、数値もしくは Bool 型という書き方ってしたことがなかったんですよね。

参考にさせていただいた記事はこちらから。

【React】PropTypes の複数種(型)指定 | Developers.IO
https://dev.classmethod.jp/articles/react-proptypes-check/

 

サンプルコードは下記の通りです。

Sample.propTypes = {
  name: PropTypes.string,
  value: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.bool,
  ]),
};

上記は Sample というコンポーネントに渡す値を指定しているのですが、name という値は String で、そして value という値は number もしくは bool が入るという指定をしています。
oneOfType を使えば、○○もしくは△△という指定が書けるんですね!

今まで使う機会がなかったので知らなかったのですが、これは便利ですね。
今後も使う機会がどこかでありそうなので、覚えておきたいと思います。

 

以上、React で PropTypes を使ってコンポーネント等値を渡す際、複数のデータ型を指定する方法でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG