Use PropTypes type checking

Original Address

1. The component special properties --propTypes

Component set propTypes properties, may be of Component props type checking property.

import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
Greeting.propTypes = {
  name: PropTypes.string
};

 

PropTypes provides a number of validation tools to help you determine the validity of props data. In the above example, we use PropTypes.stirng. Meaning: name value type should be string. When Component of props received an invalid value, the browser console will output a warning. Thus, <Greeting name = {123} /> panel appears following warning:

 

WechatIMG198.jpeg

Performance reasons, type checking is performed only in development mode.

2. PropTypes more validators

React from Import 'REACT' ; 
Import PropTypes from 'prop-types' ; 

class {React.Component the MyComponent the extends 
  the render () { 
    // use properties have more to do something 
   } 
} 

MyComponent.propTypes = {
 // you can define a property JS is a specific type (Array, Boolean, Function, Number , Object, String, Symbol). By default, these are optional. 

optionalArray: PropTypes.array, 
optionalBool: PropTypes.bool, 
optionalFunc: PropTypes.func, 
optionalNumber: PropTypes.number, 
OptionalObject: PropTypes.object, 
optionalString: PropTypes.string, 
optionalSymbol: PropTypes.symbol, 

// specify type: anything that can elements are rendered, including numbers, strings, REACT element array, fragment.
optionalNode: PropTypes.node, 

// specify type: a react element 
optionalElement: PropTypes.element, 

// you can type an instance of a class, as used herein, JS, instanceOf operator implemented 
optionalMessage: PropTypes.instanceOf (Message), 


// specify enumerated type: you can put restrictions in a certain property values 
optionalEnum: PropTypes.oneOf ([ 'News', 'Photos' ]), 

// specify multiple type: you can also limit the types of attributes within a certain specified range of types 
optionalUnion: PropTypes.oneOfType ([ 
  PropTypes.string, 
  PropTypes.number, 
  PropTypes.instanceOf (the Message) 
]), 

// the specified array of a type 
optionalArrayOf: PropTypes.arrayOf (PropTypes.number) , 

// specified object type and the object type attribute value is specified 
optionalObjectOf: PropTypes.objectOf (PropTypes.number), 


//Specified for objects, which may specify attributes and must have, properties which can not 
optionalObjectWithShape: PropTypes.shape ({ 
  optionalProperty: PropTypes.string, 
  requiredProperty: PropTypes.number.isRequired 
}), 

// the specified type for the object, and to specify What attributes of the object must have, what attributes can not. If the property is not defined appears warning appears. 
// The following code optionalObjectWithStrictShape attribute value of the object, but the attributes of the object up to two, optionalProperty and requiredProperty. 
// emergence third property, the console warning. 
optionalObjectWithStrictShape: PropTypes.exact ({ 
  optionalProperty: PropTypes.string, 
  requiredProperty: PropTypes.number.isRequired 
}), 

// add isReqired restrictions, you can specify that a property must be provided, if there is no warning. 
requiredFunc: PropTypes.func.isRequired, 
requiredAny: PropTypes.any.isRequired, 

//You can also specify a custom validator. If the authentication fails, it should return Error object instead of `console.warn` or throw an error. `oneOfType` 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.' 
    ); 
  } 
}, 

// you can also provide a validator arrayOf objectOf and custom. If the validation fails, it should return a Error object. 
// verifier to verify the value of each array or an object. The first two parameters are validators array or object itself, as well as the 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..' 
    ); 
  } 
}) 
};

 . 3. limit single child element

 

Use PropTypes.element you can specify that only one child can be passed to the component.

 // The children restricted to a single child. 
= Greeting.propTypes { 
  name: PropTypes.string, 
  Children: PropTypes.element.isRequired 
}; 
if the reference Greeting following components: 


 // pass the two sub-elements to a component Greeting Then, the console will appear warning 
<Greeting name = { ' World '}> 
      <span> subelement. 1 </ span> 
      <span> child element 2 </ span> 
 </ the Greeting>

 

WARNING Figure:

 

WechatIMG199.jpeg

4. Specify default attribute values.

You can assign a special defaultProps attribute to the component. 


// specify a default value to the name value Greeting properties. When the component references, when no incoming attribute name, will use the default value. 
= Greeting.defaultProps { 
  name: 'Stranger' 
}; 
// for ES6 can write 


class the extends the Greeting React.Component { 
  static defaultProps = { 
    name: 'Stranger' 
  } 
  the render () { 
    return (
       <div> the Hello, { the this .props } .name </ div>
     ) 
  } 
}

 

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