proptypeでpropsを検証する

3330 ワード
React TIL テキストリンク

propTypes

  • 要素の必須支柱または支柱のタイプ(タイプ)を指定する場合はproptype
    • を使用します.
    使用方法
    import PropTypes from 'prop-types';

const MyComponent = ({ name, children }) => {
  return (...);
};

MyComponent.propTypes = {
  name: PropTypes.string
};
  • に設定すると、name値は文字列で渡さなければなりません.これは
    • を意味します.
  • コンポーネントに設定されたpropsがproptypesで指定されたシェイプと一致しない場合、ブラウザ開発者ツールのコンソールラベルにエラーが発生します.
  • の値が表示されますが、コンソールから開発者に使用するツールのタイプが無効であることを示す警告メッセージが出力されます.

    isRequiredを使用して必要なprotTypeを設定する

    import PropTypes from 'prop-types';

const MyComponent = ({ name, children }) => {
  return (...);
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired
};
  • proptypeで指定した文字列と異なる場合
    コンソールからエラーメッセージが出力され、
    • もレンダリングされません.
  • アイテムタイプで指定できるタイプが非常に多い
    検索
  • もう一度探してみよう
    • [Android]Firebase登録、ログイン、匿名ログイン
    各種基本データ型の長さ