PropTypes - type checking in React

Continuation of a series of translations of the section "Advanced Guides" (Advanced Guides) of the official documentation of the React.js library.

PropTypes - type checking in React

As your application grows, you may come across a large number of type checking errors. For some applications, you can use JavaScript extensions such as Flow or TypeScript to perform the type checking of your entire application. But if you don't use any, React provides some built-in type checking capabilities.

In order to check the types of properties (props) of a component, you can define a special property of the component class - propTypes :

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

The React.PropTypes module exports a set of validators that can be used to validate received data. In this example, we use the validator React.PropTypes.string . If an invalid value is passed to the property, a warning will be displayed in the JavaScript console. For performance purposes, propTypes are checked only in development mode.

React.PropTypes

In this example, various supported validators are implemented:

 MyComponent.propTypes = { //   ,      JavaScript . //  ,         . //       . optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, // -,  React   (): , ,   /, //   . optionalNode: React.PropTypes.node, //  React. optionalElement: React.PropTypes.element, //    ,     .   //  JavaScript  instanceof. optionalMessage: React.PropTypes.instanceOf(Message), //       . optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), //    . optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // ,        . optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // ,         . optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // ,        // (      ). optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), //     . `React.PropTypes.func`   , //      . //  `.isRequired`      . // `.isRequired`       . requiredFunc: React.PropTypes.func.isRequired, //     requiredAny: React.PropTypes.any.isRequired, //     .     Error    . //   `console.warn`  `throw`, ..       `oneOfType`. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( 'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }, //       `arrayOf`  `objectOf`. //     Error    .  //        .    //  -     ,   //  . customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( 'Invalid prop `' + propFullName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }) }; 

Restriction of the only descendant

With React.PropTypes.element you can impose a restriction that only a single descendant can be passed to a component.

 class MyComponent extends React.Component { render() { //   props.children      . const children = this.props.children; return ( <div> {children} </div> ); } } MyComponent.propTypes = { children: React.PropTypes.element.isRequired }; 

Default property values

You can define default values ​​for your props defining a special property of the component class - defaultProps :

 class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } //      props: Greeting.defaultProps = { name: 'Stranger' }; //  "Hello, Stranger": ReactDOM.render( <Greeting />, document.getElementById('example') ); 

In this example, the defaultProps value will be used to set the value of this.props.name if it has not been defined in the JSX component. Type checking propTypes done after setting values ​​from defaultProps , so type checking is also used when setting values ​​from defaultProps .

The following parts:

• Ref attributes and DOM in React
• Uncontrolled components in React.
• Performance optimization in React.

Previous part:

• JSX - details.

Original Source: React - Advanced Guides - Typechecking With PropTypes