井井客

搜索

React组件propTypes校验

在React中组件间通过props传递数据时,会使用propTypes对传递的数据进行校验,看名字应该就应该了解这是对props类型的检查。

React组件propTypes校验

具体有下面这些:

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 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,

    // 所有可以被渲染的对象:数字,
    // 字符串,DOM 元素或包含这些类型的数组。
    optionalNode: React.PropTypes.node,

    // React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 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` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
});

参考链接:http://www.myexception.cn/web/2016594.html

正好用到了,所以列出来可以后期参考

另外贴一个propTypes在ES6中的写法(一个简单的实例)

import React, { Component,PropTypes } from 'react'

export default class extends Component {
	static propTypes = {
		data:PropTypes.array
	}
	render(){
		const datas = this.props.data;
		if(datas.length > 0){
			var list = datas.map((item,index)=>{
				return (
					<li key={index}>{item.typename}</li>
				)
			})
		}
		return (
			<ul>
				{list}
			</ul>
		)
	}
}

文章TAG:React

作者:井井客整理来源:互联网
本文标题:React组件propTypes校验
本文链接:/c/04264.html

上一篇:走进artTemplate模板引擎[demo汇总]
下一篇:自制练习用数据api接口

文章分类

相关阅读

随便看看