十三、使用PropTypes进行类型检测
来源:互联网 发布:酒店营业数据分析 编辑:程序博客网 时间:2024/05/21 01:32
十三、使用PropTypes进行类型检测
随着你的应用的变得越来越大,你可以通过typechecking
来找到更多的bug。 对于某些应用,您可以使用JavaScript扩展(如Flow
或TypeScript
)对整个应用程序进行类型检查。
即使你不使用这些,React也有一些内置的typechecking
能力。 要在组件的props
上运行typechecking
,可以分配特殊的propTypes
属性:
class Greeting extends React.Component { render() { return ( <h1>Hello {this.props.name}</h1> ) };}Greeting.propTypes = { name: React.PropTypes.string.isRequired};
React.PropTypes
返回的是一系列验证函数,用于确保接收的数据类似是否是有效的。
在这个例子中,我们使用React.PropTypes.string.isRequire
检测name
是否为字符串,并且是必填的。
当为prop提供无效值时,JavaScript控制台中将显示警告。 出于性能原因,仅在开发模式下检查propTypes
。
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.' ); } })};
要求只能是单个子元素
使用React.PropTypes.element
,您可以指定只有一个子元素可以作为内容传递的组件。
class MyComponent extends React.Component { render() { // 只能包含一个子元素,否则会给出警告 const children = this.props.children; return ( <div>{children}</div> ); }}MyComponent.propTypes = { children: React.PropTypes.element.isRequired}
设置Prop默认值
您可以通过使用defaultProps
属性来定义props的默认值:
class Greeting extends React.Component { render() { return <h1>hello {this.props.name}</h1>; };}// 如果name没有传值,则会将name设置为默认的zhangyataoGreeting.defaultProps = { name: 'zhangyatao'}// 会渲染处<h1>hi zhangyatao</h1>ReactDOM.render( <Greeting />, document.getElementById('root'))
如果父组件没有设置并传入name
,defaultProps
将确保this.props.name
将有一个默认值。 propTypes
类型检查发生在defaultProps
解析之后,因此类型检查也将应用于defaultProps
。
阅读全文
0 0
- 十三、使用PropTypes进行类型检测
- 使用PropTypes进行类型检测
- 使用PropTypes进行类型检测
- React使用PropTypes进行类型检测
- 使用=React.PropTypes进行类型检测
- 使用propTypes进行类型检查
- react用PropTypes检测类型
- 浅谈React的类型检测——PropTypes
- 浅谈React的类型检测——PropTypes
- propTypes的使用
- react.js-06-propTypes类型校验
- React组件属性类型(propTypes)
- React组件属性类型(propTypes)
- 使用cvHoughCircles进行圆检测
- 使用IVersionedWorkspace进行版本检测
- React PropTypes 定义组件的属性类型和默认属性
- 使用模板进行类型转换
- 如何使用Jprofiler工具进行内存检测
- 如何让.NET Core应用的配置与源文件保持同步?
- POJ 3207 Ikki's Story IV
- LINUX下tomcat的jvm编码修改
- redis配置认证密码
- 碧桂园20亿揽柳州2宗商住地 中海昆明溢价率201%地块无效
- 十三、使用PropTypes进行类型检测
- 2017年6月30日 在5427机房
- python小程序-0001
- 嵌入式linux基础学习全套精品视频教程
- 安装web开发环境
- DCMTK学习之读取BMP图像里面的像素信息
- 【思维导图】模式识别
- java线程池框架Executor
- select服务器