浅谈React的类型检测-PropTypes

随着应用的日益变大，保证组件的正确使用显得日益重要，为此引入React.propTypes：react.PropTypes 提供很多验证器来验证传入数据的有效性，当向props传入无效数据时，JavaScript 控制台会抛出警告。

注意为了性能考虑，只在开发环境验证 propTypes。

一、声明props为指定的js基本类型，可传可不传。

1、React.PropTypes.array

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.array.isRequired    
    },    
    render: function() {    
        return (    
            <div>{this.props.name}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox name={["Alice", 30, true]} />,    
    document.getElementById('timeBox')    
);
2、React.PropTypes.bool

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        student: React.PropTypes.bool.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.student ? "Hello, react!" : "Sorry!"}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox student={true}  />,    
    document.getElementById('timeBox')    
);

注意：<div>{this.props.student}</div> 渲染不出包含true的div？？？

3、React.PropTypes.func

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        sayHello: React.PropTypes.func.isRequired    
    },    
    render: function() {  
        this.props.sayHello();  
        return (    
            <div>Hello, react!</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox sayHello={function sayHello() {console.log("Hello, react!");}}  />,    
    document.getElementById('timeBox')    
);
4、React.PropTypes.number

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        age: React.PropTypes.number.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.age}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox age={23}  />,    
    document.getElementById('timeBox')    
);
5、React.PropTypes.object

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        family: React.PropTypes.object.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.family.mother} & {this.props.family.father}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox family={{mother: "Alice", father: "Bruce"}} />,    
    document.getElementById('timeBox')    
);
6、React.PropTypes.string

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.string.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.name}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox name="Alice" />,    
    document.getElementById('timeBox')    
);
7、React.PropTypes.symbol
var MyBox = React.createClass({      
    propTypes: {      
        name: React.PropTypes.symbol.isRequired      
    },      
    render: function() {  
        var obj = {  
            [this.props.name]: "Alice"  
        }  
        return (      
            <div>{obj[this.props.name]}</div>      
        );      
    }      
});      
ReactDOM.render(      
    <MyBox name={Symbol()} />,      
    document.getElementById('timeBox')      
);

二、声明props为数字、字符串、DOM 元素或包含这些类型的数组或fragment。

React.PropTypes.node

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.node.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        [<span>Hello, react!</span>, 30, "Alice"]  
    </MyBox>,    
    document.getElementById('timeBox')    
);

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.node.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        {true}  
    </MyBox>,    
    document.getElementById('timeBox')    
);

三、声明props为React元素（原生HTML元素或React类）

React.PropTypes.element

正确示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.element.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
var Children = React.createClass({    
    render: function() {  
        return (    
            <span>Hello</span>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        <div>  
            <Children />  
            <span> React</span>  
        </div>  
    </MyBox>,    
    document.getElementById('timeBox')    
);

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.element.isRequired    
    },    
    render: function() {  
        return (    
            <div>{this.props.children}</div>    
        );    
    }    
});    
var Children = React.createClass({    
    render: function() {  
        return (    
            <span>Hello</span>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox>  
        <Children />  
        <span> React</span>  
    </MyBox>,    
    document.getElementById('timeBox')    
);

四、声明props为某个指定的类

React.PropTypes.instanceOf(MyBox)

var MyBox = React.createClass({      
    propTypes: {      
        children: React.PropTypes.instanceOf(Array)     
    },      
    render: function() {  
        return (      
            <div>{this.props.children}</div>      
        );      
    }      
});        
ReactDOM.render(      
    <MyBox>  
        {[1, 2, 3]}  
    </MyBox>,      
    document.getElementById('timeBox')      
);

注意：指定的类不能是自定义的React类

五、声明props为某些指定值中的一个（用enum的方式）

React.PropTypes.oneOf(['Alice', 'Bruce'])

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.oneOf(['Alice', 'Bruce'])    
    },    
    render: function() {  
        return (    
            <div>{this.props.name}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox name="Cindy" />,    
    document.getElementById('timeBox')    
);

六、声明props为某些类型中的一个

React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, ...])

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        prop: React.PropTypes.oneOfType([  
            React.PropTypes.string,  
            React.PropTypes.number  
        ])   
    },    
    render: function() {  
        return (    
            <div>{this.props.prop}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox prop={true} />,    
    document.getElementById('timeBox')    
);

七、声明props为指定类型组成的数组

React.PropTypes.arrayOf(React.PropTypes.number)

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        prop: React.PropTypes.arrayOf(React.PropTypes.number)  
    },  
    render: function() {  
        return (    
            <div>{this.props.prop}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox prop={["Alice", 23, true]} />,    
    document.getElementById('timeBox')    
);

八、声明props为指定类型的属性构成的对象

React.PropTypes.objectOf(React.PropTypes.number)

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        family: React.PropTypes.objectOf(React.PropTypes.string)    
    },    
    render: function() {  
        return (    
            <div>{this.props.family.mother} & {this.props.family.father}</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox family={{mother: "Alice", age: 23}} />,    
    document.getElementById('timeBox')    
);

九、声明props为特定形状参数的对象

React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
})

十、声明props为必须的某类型

React.PropTypes.*.isRequired

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.string.isRequired    
    },    
    render: function() {  
        return (    
            <div>Hello, react!</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox />,    
    document.getElementById('timeBox')    
);

十一、声明props为必须的任意类型

React.PropTypes.any.isRequired

错误示范：

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.any.isRequired    
    },    
    render: function() {  
        return (    
            <div>Hello, react!</div>    
        );    
    }    
});    
ReactDOM.render(    
    <MyBox />,    
    document.getElementById('timeBox')    
);

参考：http://blog.csdn.net/zhouziyu2011/article/details/70842310

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335

推荐阅读更多精彩内容

  • React特性精华
    以下内容是我在学习和研究React时，对React的特性、重点和注意事项的提取、精练和总结，可以做为React特性...
    科研者阅读 8,195评论 2赞 21
  • Entry to React
    原教程内容详见精益 React 学习指南，这只是我在学习过程中的一些阅读笔记，个人觉得该教程讲解深入浅出，比目前大...
    leonaxiong阅读 2,805评论 1赞 18
  • React文档阅读
    自己最近的项目是基于react的，于是读了一遍react的文档，做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,304评论 1赞 10
  • React 高级指导 笔记
    深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,026评论 2赞 35
  • 谈谈从0开始快速学习React Native(一)
    React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知...
    亓凡阅读 1,441评论 1赞 4