随着应用的日益变大，保证组件的正确使用显得日益重要，为此引入React.propTypes：React.PropTypes提供很多验证器来验证传入数据的有效性，当向props传入无效数据时，JavaScript 控制台会抛出警告。
注意为了性能考虑，只在开发环境验证propTypes。
1、声明props为指定的JS基本类型，可传可不传。
1)React.PropTypes.array
正确示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
name:React.PropTypes.array.isRequired
},
render:function(){
return(
{this.props.name}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
2)React.PropTypes.bool
正确示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
student:React.PropTypes.bool.isRequired
},
render:function(){
return(
{this.props.student?"Hello,react!":"Sorry!"}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
注意：
{this.props.student}
渲染不出包含true的p???
3) React.PropTypes.func
正确示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
sayHello:React.PropTypes.func.isRequired
},
render:function(){
this.props.sayHello();
return(
Hello,react!
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
age:React.PropTypes.number.isRequired
},
render:function(){
return(
{this.props.age}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
5) React.PropTypes.object
正确示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
family:React.PropTypes.object.isRequired
},
render:function(){
return(
{this.props.family.mother}&{this.props.family.father}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
6) React.PropTypes.string
正确示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
name:React.PropTypes.string.isRequired
},
render:function(){
return(
{this.props.name}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
7) React.PropTypes.symbol
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
name:React.PropTypes.symbol.isRequired
},
render:function(){
varobj={
[this.props.name]:"Alice"
}
return(
{obj[this.props.name]}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
children:React.PropTypes.node.isRequired
},
render:function(){
return(
{this.props.children}
);
}
});
ReactDOM.render(
[Hello,react!,30,"Alice"]
,
document.getElementById('timeBox')
);
错误示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
children:React.PropTypes.node.isRequired
},
render:function(){
return(
{this.props.children}
);
}
});
ReactDOM.render(
{true}
,
document.getElementById('timeBox')
);
3、声明props为React元素(原生HTML元素或React类)
React.PropTypes.element
正确示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
children:React.PropTypes.element.isRequired
},
render:function(){
return(
{this.props.children}
);
}
});
varChildren=React.createClass({
render:function(){
return(
Hello
);
}
});
ReactDOM.render(
React
,
document.getElementById('timeBox')
); 错误示范： [javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
children:React.PropTypes.element.isRequired
},
render:function(){
return(
{this.props.children}
);
}
});
varChildren=React.createClass({
render:function(){
return(
Hello
);
}
});
ReactDOM.render(
React
,
document.getElementById('timeBox')
);
4、声明props为某个指定的类
React.PropTypes.instanceOf(MyBox)
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
children:React.PropTypes.instanceOf(Array)
},
render:function(){
return(
{this.props.children}
);
}
});
ReactDOM.render(
{[1,2,3]}
,
document.getElementById('timeBox')
); 注意：指定的类不能是自定义的React类
5、声明props为某些指定值中的一个(用enum的方式)
React.PropTypes.oneOf(['Alice', 'Bruce'])
错误示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
name:React.PropTypes.oneOf(['Alice','Bruce'])
},
render:function(){
return(
{this.props.name}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
6、声明props为某些类型中的一个
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number, ...])
错误示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
prop:React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
])
},
render:function(){
return(
{this.props.prop}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
prop:React.PropTypes.arrayOf(React.PropTypes.number)
},
render:function(){
return(
{this.props.prop}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
8、声明props为指定类型的属性构成的对象
React.PropTypes.objectOf(React.PropTypes.number)
错误示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
family:React.PropTypes.objectOf(React.PropTypes.string)
},
render:function(){
return(
{this.props.family.mother}&{this.props.family.father}
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
9、声明props为特定形状参数的对象
React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
})
10、声明props为必须的某类型
React.PropTypes.*.isRequired
错误示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
name:React.PropTypes.string.isRequired
},
render:function(){
return(
Hello,react!
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
11、声明props为必须的任意类型
React.PropTypes.any.isRequired
错误示范：
[javascript]view plaincopy
varMyBox=React.createClass({
propTypes:{
name:React.PropTypes.any.isRequired
},
render:function(){
return(
Hello,react!
);
}
});
ReactDOM.render(
,
document.getElementById('timeBox')
);
