重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設、域名注冊、服務器等服務
React中怎么實現(xiàn)Props驗證
本文小編為大家詳細介紹“React中怎么實現(xiàn)Props驗證”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“React中怎么實現(xiàn)Props驗證”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都做網(wǎng)站與策劃設計,永州網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設十余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:永州等地區(qū)。永州做網(wǎng)站價格咨詢:13518219792
Props驗證對于組件的正確使用是一種非常有用的方式。它可以避免隨著你的應用的程序越來越復雜從而出現(xiàn)很多的bug和問題。并且，它還可以是你的程序變得更易讀。
那如何對Props進行驗證呢，其實很簡單，React為我們提供了PropTypes以供驗證使用。當我們向Props傳入的數(shù)據(jù)無效（也就是向Props傳入的數(shù)據(jù)類型和驗證的數(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 (
Array:{this.props.optionalArray}
Bool:{this.props.optionalBool}
Func:click
Number:{this.props.optionalNumber}
Object:{this.props.optionalObject.object1}
Object:{this.props.optionalObject.object2}
Object:{this.props.optionalObject.object3}
String:{this.props.optionalString}
);
}
});
ReactDOM.render(
document.getElementById('content')
);
當然，上面這個例子是沒有錯誤的。下面我們將上面的例子進行修改
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`.
這是一種情況，驗證Props的數(shù)據(jù)類型。還有一種情況就是驗證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,
},
在React.PropTypes.array和React.PropTypes.bool后面加上isRequired，表示optionalArray和optionalBool兩項是必須有值的
getDefaultProps:function(){
return {
optionalFunc: function (arg) {
console.log(arg);
},
optionalNumber: 3,
optionalObject: {
object1: "objectvalue1",
object2: "objectvalue2",
object3: "objectvalue3",
},
optionalString: "My Onmpw",
};
},
在上面代碼中我們將optionalArray和optionalBool去掉，然后再去瀏覽器中運行代碼，會發(fā)現(xiàn)控制臺報如下的錯誤
Warning: Failed propType: Required prop `optionalArray` was not specified in `Propsva`.
Warning: Failed propType: Required prop `optionalBool` was not specified in `Propsva`.
當然，上面只是簡單的兩種情況。對于Props的驗證，還有很多的東西，驗證的形式也有很多，具體我們可以參考React官方文檔。
這里我們有一個知識點需要說明一下，就是getDefaultProps。這是默認給Props賦值。看下面的代碼
var ComponentDefaultProps = React.createClass({
getDefaultProps: function() {
return {
value: 'Default Value'
};
},
render:function(){
return (
{this.props.value}
)
}
});
ReactDOM.render(
document.getElementById('content')
);
getDefaultProps()可以保證，當父級組件沒有傳入Props的時候，可以保證當前組件有默認的Props的值。需要注意的是，getDefaultProps的返回結果是會被緩存起來的。因此，我們可以直接使用Props，而沒有必要再手動編寫一些沒有意義的重復的代碼。
讀到這里，這篇“React中怎么實現(xiàn)Props驗證”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當前文章：React中怎么實現(xiàn)Props驗證
文章分享：http://www.xueling.net.cn/article/pecihd.html