在开发组件时一定需要传递数据来使用的,这时验证值类型是必不可少的。
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 />