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

来源：互联网发布：分时均线源码编辑：程序博客网时间：2024/06/06 01:57

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

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对象属性的类型 
属性类型都从React.PropTypes.XX来引用 
也可以自定义,函数参数为props对象属性引用名组件的名,函数内判断内容是否符合要求，可做验证。如不行返回一个new Error() 
当定义了属性类型，运行时当有属性值时会判断是否合法，未通过会在console里显示出来提示。 
getDefaultProps定义的默认值也会验证的。 
必需的属性和自定义的属性，未传递值也会验证提示的。其他类型的属性无值不会验证。 
也可以给children添加验证

0 0