React.PropTypes是React用来typechecking的一个属性。要在组件的props
上运行typechecking
,可以分配特殊的propTypes
属性:
1 class Greeting extends React.Component { 2 render() { 3 return ( 4 <h1>Hello {this.props.name}</h1> 5 ) 6 }; 7 } 8 Greeting.propTypes = { 9 name: React.PropTypes.string.isRequired //这里表示name这个实行必须是一个字符串,并且是必须要有的参数 10 };
1 MyComponent.propTypes = { 2 // 你可以定义一个js原始类型的prop,默认请情况下,这是都是可选的 3 optionalArray: React.PropTypes.array, 4 optionalBool: React.PropTypes.bool, 5 optionalFunc: React.PropTypes.func, 6 optionalNumber: React.PropTypes.number, 7 optionalObject: React.PropTypes.object, 8 optionalString: React.PropTypes.string, 9 optionalSymbol: React.PropTypes.symbol, 10 11 // 任何可以渲染的东西:数字,字符串,元素或数组(或片段)。 12 optionalNode: React.PropTypes.node, 13 14 // React元素 15 optionalElement: React.PropTypes.element, 16 17 // 你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。 18 optionalMessage: React.PropTypes.instanceOf(Message), 19 20 // 你可以通过将它作为枚举来确保你的prop被限制到特定的值。 21 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), 22 23 // 可以是许多类型之一的对象 24 optionalUnion: React.PropTypes.oneOfType([ 25 React.PropTypes.string, 26 React.PropTypes.number, 27 React.PropTypes.instanceOf(Message) 28 ]), 29 30 // 某种类型的数组 31 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), 32 33 // 具有某种类型的属性值的对象 34 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), 35 36 // 采取特定样式的对象 37 optionalObjectWithShape: React.PropTypes.shape({ 38 color: React.PropTypes.string, 39 fontSize: React.PropTypes.number 40 }), 41 42 // 你可以用`isRequired`来连接到上面的任何一个类型,以确保如果没有提供props的话会显示一个警告。 43 requiredFunc: React.PropTypes.func.isRequired, 44 45 // 任何数据类型 46 requiredAny: React.PropTypes.any.isRequired, 47 48 // 您还可以指定自定义类型检查器。 如果检查失败,它应该返回一个Error对象。 不要`console.warn`或throw,因为这不会在`oneOfType`内工作。 49 customProp: function(props, propName, componentName) { 50 if (!/matchme/.test(props[propName])) { 51 return new Error( 52 'Invalid prop `' + propName + '` supplied to' + 53 ' `' + componentName + '`. Validation failed.' 54 ); 55 } 56 }, 57 58 // 您还可以为`arrayOf`和`objectOf`提供自定义类型检查器。 如果检查失败,它应该返回一个Error对象。 59 // 检查器将为数组或对象中的每个键调用验证函数。 60 // 检查器有两个参数,第一个参数是数组或对象本身,第二个是当前项的键。 61 customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { 62 if (!/matchme/.test(propValue[key])) { 63 return new Error( 64 'Invalid prop `' + propFullName + '` supplied to' + 65 ' `' + componentName + '`. Validation failed.' 66 ); 67 } 68 }) 69 };
不过在react15.5.0废除了个这个属性,那么15.5.0版本之后的类型检测该怎么办呢,https://github.com/facebook/prop-types#prop-types这是新版本之后改怎么解决的git源地址;这里我们做简单的说明
npm install --save prop-types //下载安装这个包
import PropTypes from 'prop-types' //引入你需要检测数据类型的组件
下面是如何在组件中使用
1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 //组件 4 class MyComponent extends React.Component { 5 render() { 6 // ... do things with the props 7 } 8 }
使用 9 MyComponent.propTypes = { 10 // You can declare that a prop is a specific JS primitive. By default, these 11 // are all optional. 12 optionalArray: PropTypes.array, 13 optionalBool: PropTypes.bool, 14 optionalFunc: PropTypes.func, 15 optionalNumber: PropTypes.number, 16 optionalObject: PropTypes.object, 17 optionalString: PropTypes.string, 18 optionalSymbol: PropTypes.symbol, 19 20 // Anything that can be rendered: numbers, strings, elements or an array 21 // (or fragment) containing these types. 22 optionalNode: PropTypes.node, 23 24 // A React element. 25 optionalElement: PropTypes.element, 26 27 // You can also declare that a prop is an instance of a class. This uses 28 // JS's instanceof operator. 29 optionalMessage: PropTypes.instanceOf(Message), 30 31 // You can ensure that your prop is limited to specific values by treating 32 // it as an enum. 33 optionalEnum: PropTypes.oneOf(['News', 'Photos']), 34 35 // An object that could be one of many types 36 optionalUnion: PropTypes.oneOfType([ 37 PropTypes.string, 38 PropTypes.number, 39 PropTypes.instanceOf(Message) 40 ]), 41 42 // An array of a certain type 43 optionalArrayOf: PropTypes.arrayOf(PropTypes.number), 44 45 // An object with property values of a certain type 46 optionalObjectOf: PropTypes.objectOf(PropTypes.number), 47 48 // An object taking on a particular shape 49 optionalObjectWithShape: PropTypes.shape({ 50 color: PropTypes.string, 51 fontSize: PropTypes.number 52 }), 53 54 // You can chain any of the above with `isRequired` to make sure a warning 55 // is shown if the prop isn't provided. 56 requiredFunc: PropTypes.func.isRequired, 57 58 // A value of any data type 59 requiredAny: PropTypes.any.isRequired, 60 61 // You can also specify a custom validator. It should return an Error 62 // object if the validation fails. Don't `console.warn` or throw, as this 63 // won't work inside `oneOfType`. 64 customProp: function(props, propName, componentName) { 65 if (!/matchme/.test(props[propName])) { 66 return new Error( 67 'Invalid prop `' + propName + '` supplied to' + 68 ' `' + componentName + '`. Validation failed.' 69 ); 70 } 71 }, 72 73 // You can also supply a custom validator to `arrayOf` and `objectOf`. 74 // It should return an Error object if the validation fails. The validator 75 // will be called for each key in the array or object. The first two 76 // arguments of the validator are the array or object itself, and the 77 // current item's key. 78 customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { 79 if (!/matchme/.test(propValue[key])) { 80 return new Error( 81 'Invalid prop `' + propFullName + '` supplied to' + 82 ' `' + componentName + '`. Validation failed.' 83 ); 84 } 85 }) 86 };