Javascript.Reactjs-5-prop-validation-and-proptypes

Posted 2020-07-31 XiaoKL

Props & PropTypes

1. Props

"Props are the mechanism React uses to let components communicate with each other.

A parent component can pass it’s child(ren) named prop values, which the child can then

use in its internal logic." Ref[2]

 

"React components have an internal property ‘props’. This property contains all the props

a component gets from its parent. "  Ref[2]

 

2. PropTypes 

2.1 Introduction

"This is where Reacts propTypes come in. It’s essentially a dictionary where you define what

props your component needs and what type(s) they should be."  Ref[2]

 

 1 propTypes: {
 2   //Id can be a number, or a string, but it needs to be defined!
 3   id: React.PropTypes.oneOfType([
 4     React.PropTypes.number,
 5     React.PropTypes.string
 6   ]).isRequired,
 7 
 8  //Messages should be an object with a title and text property of type string
 9   message: React.PropTypes.shape({  
10     title: React.PropTypes.string,
11     text: React.PropTypes.string
12   }).isRequired,
13 
14   //The comments property needs to be an array of objects.
15   comments: React.PropTypes.arrayOf(React.PropTypes.object),
16 
17   //The date needs to be an instance of type Date.
18   date: React.PropTypes.instanceOf(Date)
19 }

 

 

2.2 React.PropTypes.shape()

[email protected]

A): React.js

 1 var ReactPropTypes = require(‘./ReactPropTypes‘);
 2 
 3 // ......
 4 
 5 var React = {
 6     // ......
 7     PropTypes: ReactPropTypes,
 8     // .......
 9 };
10 
11 module.exports = React;

  

B): ReactPropTypes.js

 1 var ReactPropTypes = {
 2   array: createPrimitiveTypeChecker(‘array‘),
 3   bool: createPrimitiveTypeChecker(‘boolean‘),
 4   func: createPrimitiveTypeChecker(‘function‘),
 5   number: createPrimitiveTypeChecker(‘number‘),
 6   object: createPrimitiveTypeChecker(‘object‘),
 7   string: createPrimitiveTypeChecker(‘string‘),
 8 
 9   any: createAnyTypeChecker(),
10   arrayOf: createArrayOfTypeChecker,
11   element: createElementTypeChecker(),
12   instanceOf: createInstanceTypeChecker,
13   node: createNodeChecker(),
14   objectOf: createObjectOfTypeChecker,
15   oneOf: createEnumTypeChecker,
16   oneOfType: createUnionTypeChecker,
17   shape: createShapeTypeChecker
18 };
19 
20 // ......
21 module.exports = ReactPropTypes;

 

C): Comment for createShapeTypeChecker function

function createShapeTypeChecker(shapeTypes)

function createChainableTypeChecker(validate)

ReactPropTypes-reading.js

 

2.3 Use Case of React.PropTypes.shape()

https://github.com/reactjs/react-redux/blob/master/src/utils/storeShape.js

https://github.com/reactjs/react-redux/blob/master/src/components/Provider.js

 

---

Reference

1. Prop Validation

https://facebook.github.io/react/docs/reusable-components.html

2. Why React PropTypes are important 

http://wecodetheweb.com/2015/06/02/why-react-proptypes-are-important/