proptypes Introduction

Start

The main role of prop-types: the type of data to detect and limit the props

Reference Methods:import PropTypes from 'prop-types'

usage:

// basic usage data for detecting the type 
componentsName.PropTypes = { 
    parameter variables: PropTypes type. 
} 
// example 
myComponents.PropTypes = { 
    name: Proptypes.string 
}

 

(Original official documents cases)

1. Specify the basic data types

 

2. 
   

   = MyComponent.propTypes {
        // you can declare the following attributes JS native types 
       optionalArray: PropTypes.array, 
       optionalBool: PropTypes.bool, 
       optionalFunc: PropTypes.func, 
       optionalNumber: PropTypes.number, 
       OptionalObject: PropTypes.object, 
       optionalString: PropTypes .string, 
       optionalSymbol: PropTypes.symbol, 
   } 
   subject

    

   Is not a measure that can be rendered elements, function can not be rendered

= MyComponent.propTypes {
  // any element can be rendered (including numbers, strings, arrays, or sub-elements). 
  optionalNode: PropTypes.node,    
}

 

3. Detecting whether a prototype example

MyComponent.propTypes = {
    optionalMessage: PropTypes.instanceOf(Message),
}

 

4. Restrict specific content - can only be news or photos

= MyComponent.propTypes {
     // you can limit your one attribute value is a particular value 
    optionalEnum: PropTypes.oneOf ([ 'News', 'Photos' ]), 
}

 

5. Type in a certain range of - may be string, number, examples

= MyComponent.propTypes {
     // limit it to one of the types of objects include 
    optionalUnion: PropTypes.oneOfType ([ 
        PropTypes.string, 
        PropTypes.number, 
        PropTypes.instanceOf (the Message) 
    ]), 
}

 

6. Specifies the content type of all array - an array of all types of content must both be number

= MyComponent.propTypes {
    // a specified element of the array type 
  optionalArrayOf: PropTypes.arrayOf (PropTypes.number), 
}

 

7. Object specified element type - must all content objects number

= MyComponent.propTypes {
     // a specified type of object 
    optionalObjectOf: PropTypes.objectOf (PropTypes.number), 
}

 

8. Object type --color specified property and must be of type string, fontSize is the type of number

= MyComponent.propTypes {
     // a specified object type and attribute of 
    optionalObjectWithShape: PropTypes.shape ({ 
     Color: PropTypes.string, 
     the fontSize: PropTypes.number 
    }), 
}

 

9. Detect whether the content exists - no words will print a warning message

= MyComponent.propTypes {
     // you can later add any attributes PropTypes isRequired` ` 
    // suffix, so that if the parent component does not have this property, a warning message is printed 
    requiredFunc: PropTypes.func.isRequired, 

}

 

10. Any data type - random type can be, but what you want to exist

= MyComponent.propTypes {
     // arbitrary data 
    requiredAny: PropTypes.any.isRequired, 

}

 

11. Custom validator

= MyComponent.propTypes {
    // you can specify a custom validator. It should return when validation fails 
  // a Error object instead of `console.warn` or throw an exception. 
  // But `oneOfType` it does not work. 
  customProp: function (The props, propName, componentName) {
     IF (! / a matchme / .test (The props [propName])) {
       return  new new Error (
         'Invalid prop `' + propName + '` Supplied to' + 
        ' `' + componentName + '. `the validation failed.' 
      ); 
    } 
  }, 
    // but you can provide a` arrayOf` or `objectOf` custom 
  // validator, it should return an Error object when validation fails. It is used 
  // for each array value or object validation. The first two parameters before validator is an array
  // or the object itself, and the second is their corresponding key. 
  customArrayProp: PropTypes.arrayOf ( function (PROPVALUE, Key, componentName, LOCATION, propFullName) {
     IF ! (/ a matchme / .test (PROPVALUE [Key])) {
       return  new new Error (
         'Invalid prop `' + propFullName + '` Supplied to '+ 
        .' ` '+ componentName +'` the Validation failed '. 
      ); 
    } 
  }) 
}

 

12. --1 element element. react element is a detection element 2 is present and is a progeny of a single

// is a react element 
MyComponent.propTypes = { 
  optionalElement: PropTypes.element, 
} 
// detect whether a single progeny 
MyComponent.propTypes = { 
  optionalElement: PropTypes.element.isRequired, 
}

 

13. Property Default - Default value added

the extends the Greeting React.Component {class 
  the render () { 
    return (
       <h1 of> the Hello, { the this .props.name} </ h1 of>
     ); 
  } 
} 

// attribute specify default values: 
Greeting.defaultProps = { 
  name: 'Stranger ' 
}; 

// render "the Hello, Stranger": 
ReactDOM.render (
   <the Greeting />, 
  document.getElementById (' Example ' ) 
); 

// another method of setting the default value of 
static defaultProps = { 
    name: ' Stranger ' 
  }

 

Author: TianYiYang
link: https: //www.jianshu.com/p/d1207c6edc61
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.