Props驗(yàn)證對于組件的正確使用是一種非常有用的方式。它可以避免隨著你的應(yīng)用的程序越來越復(fù)雜從而出現(xiàn)很多的bug和問題。并且，它還可以是你的程序變得更易讀。

那如何對Props進(jìn)行驗(yàn)證呢，其實(shí)很簡單，React為我們提供了PropTypes以供驗(yàn)證使用。當(dāng)我們向Props傳入的數(shù)據(jù)無效（也就是向Props傳入的數(shù)據(jù)類型和驗(yàn)證的數(shù)據(jù)類型不符）就會在控制臺發(fā)出警告信息。

看下面的例子

var Propsva = React.createClass({  propTypes: {    optionalArray: React.PropTypes.array,    optionalBool: React.PropTypes.bool,    optionalFunc: React.PropTypes.func,    optionalNumber: React.PropTypes.number,    optionalObject: React.PropTypes.object,    optionalString: React.PropTypes.string,  },  getDefaultProps:function(){    return {      optionalArray: ['onmpw.com','——跡憶博客'],      optionalBool: true,      optionalFunc: function (arg) {        console.log(arg);      },      optionalNumber: 3,      optionalObject: {        object1: "objectvalue1",        object2: "objectvalue2",        object3: "objectvalue3",      },      optionalString: "My Onmpw",    };  },  render:function(){    return (      <div>        <h3>Array:{this.props.optionalArray}</h3>        <h3>Bool:{this.props.optionalBool}</h3>        <h3 onClick={this.props.optionalFunc}>Func:click</h3>        <h3>Number:{this.props.optionalNumber}</h3>        <h3>Object:{this.props.optionalObject.object1}</h3>        <h3>Object:{this.props.optionalObject.object2}</h3>        <h3>Object:{this.props.optionalObject.object3}</h3>        <h3>String:{this.props.optionalString}</h3>      </div>    );  }});ReactDOM.render(  <Propsva />,  document.getElementById('content'));

當(dāng)然，上面這個(gè)例子是沒有錯誤的。下面我們將上面的例子進(jìn)行修改

getDefaultProps:function(){  return {    optionalArray: 'onmpw.com——跡憶博客',    optionalBool: true,    optionalFunc: function (arg) {      console.log(arg);    },    optionalNumber: 3,    optionalObject: {      object1: "objectvalue1",      object2: "objectvalue2",      object3: "objectvalue3",    },    optionalString: "My Onmpw",  };},

然后，我們會在控制臺中發(fā)現(xiàn)有如下的警告

Warning: Failed propType: Invalid prop `optionalArray` of type `string` supplied to `Propsva`, expected `array`.

這是一種情況，驗(yàn)證Props的數(shù)據(jù)類型。還有一種情況就是驗(yàn)證Props是否有值。看下面的代碼

propTypes: {  optionalArray: React.PropTypes.array.isRequired,  optionalBool: React.PropTypes.bool.isRequired,  optionalFunc: React.PropTypes.func,  optionalNumber: React.PropTypes.number,  optionalObject: React.PropTypes.object,  optionalString: React.PropTypes.string,},