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

創(chuàng)新互聯(lián)公司專注于建寧企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站定制開發(fā)。建寧網(wǎng)站建設(shè)公司,為建寧等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計(jì),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
那如何對(duì)Props進(jìn)行驗(yàn)證呢,其實(shí)很簡(jiǎn)單,React為我們提供了PropTypes以供驗(yàn)證使用。當(dāng)我們向Props傳入的數(shù)據(jù)無(wú)效(也就是向Props傳入的數(shù)據(jù)類型和驗(yàn)證的數(shù)據(jù)類型不符)就會(huì)在控制臺(tái)發(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')
);
當(dāng)然,上面這個(gè)例子是沒有錯(cuò)誤的。下面我們將上面的例子進(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",
};
},
然后,我們會(huì)在控制臺(tái)中發(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,
},
在React.PropTypes.array和React.PropTypes.bool后面加上isRequired,表示optionalArray和optionalBool兩項(xiàng)是必須有值的
getDefaultProps:function(){
return {
optionalFunc: function (arg) {
console.log(arg);
},
optionalNumber: 3,
optionalObject: {
object1: "objectvalue1",
object2: "objectvalue2",
object3: "objectvalue3",
},
optionalString: "My Onmpw",
};
},
在上面代碼中我們將optionalArray和optionalBool去掉,然后再去瀏覽器中運(yùn)行代碼,會(huì)發(fā)現(xiàn)控制臺(tái)報(bào)如下的錯(cuò)誤
Warning: Failed propType: Required prop `optionalArray` was not specified in `Propsva`.
Warning:Failed propType: Required prop `optionalBool` was not specified in `Propsva`.
當(dāng)然,上面只是簡(jiǎn)單的兩種情況。對(duì)于Props的驗(yàn)證,還有很多的東西,驗(yàn)證的形式也有很多,具體我們可以參考React官方文檔。
這里我們有一個(gè)知識(shí)點(diǎn)需要說(shuō)明一下,就是getDefaultProps。這是默認(rèn)給Props賦值??聪旅娴拇a
var ComponentDefaultProps = React.createClass({
getDefaultProps: function() {
return {
value: 'Default Value'
};
},
render:function(){
return (
{this.props.value}
)
}
});
ReactDOM.render(
,
document.getElementById('content')
);
getDefaultProps()可以保證,當(dāng)父級(jí)組件沒有傳入Props的時(shí)候,可以保證當(dāng)前組件有默認(rèn)的Props的值。需要注意的是,getDefaultProps的返回結(jié)果是會(huì)被緩存起來(lái)的。因此,我們可以直接使用Props,而沒有必要再手動(dòng)編寫一些沒有意義的重復(fù)的代碼。
對(duì)于Props的驗(yàn)證,就介紹到這里。希望本文對(duì)大家有所幫助。也希望大家多多支持創(chuàng)新互聯(lián)。
文章標(biāo)題:React教程之Props驗(yàn)證的具體用法(PropsValidation)
網(wǎng)頁(yè)地址:http://fisionsoft.com.cn/article/pijihi.html


咨詢
建站咨詢
