propTypes

使用PropTypes进行类型检测

React.PropTypes.string.isRequire检测name是否为字符串，并且是必填的。 
当为prop提供无效值时，JavaScript控制台中将显示警告

MyComponent.propTypes = {
  // 你可以定义一个js原始类型的prop,默认请情况下，这是都是可选的
  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, // 任何可以渲染的东西：数字，字符串，元素或数组（或片段）。 optionalNode: React.PropTypes.node, // React元素 optionalElement: React.PropTypes.element, // 你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。 optionalMessage: React.PropTypes.instanceOf(Message), // 你可以通过将它作为枚举来确保你的prop被限制到特定的值。 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 }), // 你可以用`isRequired`来连接到上面的任何一个类型，以确保如果没有提供props的话会显示一个警告。 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.' ); } }) }; 使用defaultProps属性来定义props的默认值

转载于:https://www.cnblogs.com/2oex/p/9569182.html