在开发组件时一定需要传递数据来使用的,这时验证值类型是必不可少的。
reactjs也给我们提供了很多验证。在React.PropTypes对象来下来引用 如React.PropTypes.number验证数字。
验证列表http://www.reactjs.cn/react/docs/reusable-components.html
以下是我本地测试时的例子:
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // 引用 mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // 调用 mixin 的方法
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});
React.render(
<ticktock>,
document.getElementById('example')
);
setTimeout(function(){
React.render(
<ticktock>,
document.getElementById('example2')
);
},1000)
</ticktock></ticktock>
组件propTypes对象用来定义prop对象属性的类型<br />
属性类型都从React.PropTypes.XX来引用<br />
也可以自定义,函数参数为props对象 属性引用名 组件的名,函数内判断内容是否符合要求,可做验证。如不行返回一个new Error()<br />
当定义了属性类型,运行时当有属性值时会判断是否合法, 未通过会在console里显示出来提示。<br />
getDefaultProps定义的默认值也会验证的。<br />
必需的属性和自定义的属性,未传递值也会验证提示的。其他类型的属性无值不会验证。<br />
也可以给children添加验证<br />