React从入门到精通系列之(13)使用PropTypes进行类型检测
十三、使用PropTypes进行类型检测随着你的应用的变得越来越大,你可以通过 即使你不使用这些,React也有一些内置的 class Greeting extends React.Component { render() { return ( <h1>Hello {this.props.name}</h1> ) }; } Greeting.propTypes = { name: React.PropTypes.string.isRequired };
React.PropTypes下面是一个示例,其中提供了不同的验证函数: 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.' ); } }) }; 要求只能是单个子元素使用 class MyComponent extends React.Component { render() { // 只能包含一个子元素,否则会给出警告 const children = this.props.children; return ( <div>{children}</div> ); } } MyComponent.propTypes = { children: React.PropTypes.element.isRequired } 设置Prop默认值您可以通过使用 class Greeting extends React.Component { render() { return <h1>hello {this.props.name}</h1>; }; } // 如果name没有传值,则会将name设置为默认的zhangyatao Greeting.defaultProps = { name: 'zhangyatao' } // 会渲染处<h1>hi zhangyatao</h1> ReactDOM.render( <Greeting />,document.getElementById('root') ) 如果父组件没有设置并传入 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |