PropTypes用于对类型的验证,从而更加容易捕获bug。在React v15.5之前,它内置React.PropTypes函数帮助解决,之后放弃支持,采用prop-types库定义。
1 import PropTypes from 'prop-types'; 2 class Example extends React.Component { // 基本使用 3 render() { 4 return <div>{this.props.name}{this.props.user}</div>; 5 } 6 } 7 Example.propTypes = { // 驼峰式的写法,与下面不同 8 name: PropTypes.string, 9 user: PropTypes.string.isRequired // 假如果类中并没有user的属性,那么会报出警告,而上一句则不会 10 };
下面是常用和不常用的一些验证写法,从官网获取:
1 import PropTypes from 'prop-types'; 2 3 MyComponent.propTypes = { 4 // 你可以声明一个 prop 是一个特定的 JS 原始类型。 5 // 默认情况下,这些都是可选的。 6 optionalArray: PropTypes.array, 7 optionalBool: PropTypes.bool, 8 optionalFunc: PropTypes.func, 9 optionalNumber: PropTypes.number, 10 optionalObject: PropTypes.object, 11 optionalString: PropTypes.string, 12 optionalSymbol: PropTypes.symbol, 13 14 // 任何东西都可以被渲染:numbers, strings, elements,或者是包含这些类型的数组(或者是片段)。 15 optionalNode: PropTypes.node, 16 17 // 一个 React 元素。 18 optionalElement: PropTypes.element, 19 20 // 你也可以声明一个 prop 是类的一个实例。 21 // 使用 JS 的 instanceof 运算符。 22 optionalMessage: PropTypes.instanceOf(Message), 23 24 // 你可以声明 prop 是特定的值,类似于枚举 25 optionalEnum: PropTypes.oneOf(['News', 'Photos']), 26 27 // 一个对象可以是多种类型其中之一 28 optionalUnion: PropTypes.oneOfType([ 29 PropTypes.string, 30 PropTypes.number, 31 PropTypes.instanceOf(Message) 32 ]), 33 34 // 一个某种类型的数组 35 optionalArrayOf: PropTypes.arrayOf(PropTypes.number), 36 37 // 属性值为某种类型的对象 38 optionalObjectOf: PropTypes.objectOf(PropTypes.number), 39 40 // 一个特定形式的对象 41 optionalObjectWithShape: PropTypes.shape({ 42 color: PropTypes.string, 43 fontSize: PropTypes.number 44 }), 45 46 // 你可以使用 `isRequired' 链接上述任何一个,以确保在没有提供 prop 的情况下显示警告。 47 requiredFunc: PropTypes.func.isRequired, 48 49 // 任何数据类型的值 50 requiredAny: PropTypes.any.isRequired, 51 52 // 你也可以声明自定义的验证器。如果验证失败返回 Error 对象。不要使用 `console.warn` 或者 throw , 53 // 因为这不会在 `oneOfType` 类型的验证器中起作用。 54 customProp: function(props, propName, componentName) { 55 if (!/matchme/.test(props[propName])) { 56 return new Error( 57 'Invalid prop `' + propName + '` supplied to' + 58 ' `' + componentName + '`. Validation failed.' 59 ); 60 } 61 }, 62 63 // 也可以声明`arrayOf`和`objectOf`类型的验证器,如果验证失败需要返回Error对象。 64 // 会在数组或者对象的每一个元素上调用验证器。验证器的前两个参数分别是数组或者对象本身, 65 // 以及当前元素的键值。 66 customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { 67 if (!/matchme/.test(propValue[key])) { 68 return new Error( 69 'Invalid prop `' + propFullName + '` supplied to' + 70 ' `' + componentName + '`. Validation failed.' 71 ); 72 } 73 }) 74 };
除了父组件给传递属性和方法外,子组件内部默认可以指定值,而此时propTypes的类型检测依然生效,因为它是在defaultProps之后进行的:
1 import PropTypes from 'prop-types'; 2 class Example extends React.Component { 3 render() { 4 return <div>{this.props.name}{this.props.user}</div>; 5 } 6 } 7 Example.defaultProps = { 8 name: 'eric', 9 user: 'ppp' 10 }; 11 Example.propTypes = { 12 name: PropTypes.string, 13 user: PropTypes.string.isRequired 14 };