reactのタイプチェック(PropTypes)

1785 ワード

タイプチェックの際には、コンポーネントに必要でないデータタイプが入るのを避けるため、不必要なバグが発生します.以下はPropTypesを勉強する時のメモです.
宣言はjsタイプです
  optionalArray: PropTypes.array,//  
  optionalBool: PropTypes.bool,//  
  optionalFunc: PropTypes.func,//function
  optionalNumber: PropTypes.number,//  
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
は、任意のレンダーのタイプとして宣言することができます.
optionalElement: PropTypes.element,
は、あるクラスの実例として宣言しています.
optionalMessage: PropTypes.instanceOf(Message),
エニュメレート・限定
optionalEnum: PropTypes.oneOf(['News', 'Photos'])
objectを使用して、複数のタイプに限定されます.
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
特定の配列タイプ
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
特定のObjectタイプ
optionalObjectOf: PropTypes.objectOf(PropTypes.number)
は、上述のすべての検証をisrequiredを使用して実施することができる.
requiredFunc: PropTypes.func.isRequired,
functionを使用する
一つの機能を使って検証器をカスタマイズできます.   これはErrerのobjectタイプのエラーを返します.チェックが失敗した時に.  以下のとおりです
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
デフォルトのprops値を設定して使用します.  コンポーネント.defaultProps={}  の文法で来ました  例えば、以下のように
class Greeting extends React.Component {
  render() {
    return (
      

Hello, {this.props.name}

); } } Greeting.defaultProps = { name: 'Stranger' };