React组件定义验证属性值和默认值的配置

在开发组件时一定需要传递数据来使用的,这时验证值类型是必不可少的。

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 />

你可能感兴趣的:(React组件定义验证属性值和默认值的配置)