1.組件特殊屬性——propTypes
對(duì)Component設(shè)置propTypes屬性村视，可以為Component的props屬性進(jìn)行類型檢查荷科。
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
PropTypes提供了許多驗(yàn)證工具洁段，用來(lái)幫助你確定props數(shù)據(jù)的有效性。在上面這個(gè)例子中咪笑，我們使用了PropTypes.stirng浸剩。意思是：name的值類型應(yīng)該是string钾军。 當(dāng)Component的props接收到一個(gè)無(wú)效的值時(shí)，瀏覽器控制臺(tái)就會(huì)輸出一個(gè)警告绢要。因此吏恭，<Greeting name={123}/> 控制臺(tái)會(huì)出現(xiàn)如下警告：
WechatIMG198.jpeg
處于性能原因，類型檢查僅在開(kāi)發(fā)模式下進(jìn)行重罪。
2.PropTypes的更多驗(yàn)證器
import React from 'react';
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
// 利用屬性做更多得事
}
}
MyComponent.propTypes = {
//你可以定義一個(gè)屬性是特定的JS類型（Array,Boolean,Function,Number,Object,String,Symbol）樱哼。默認(rèn)情況下，這些都是可選的蛆封。
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
//指定類型為：任何可以被渲染的元素唇礁，包括數(shù)字勾栗，字符串惨篱，react 元素，數(shù)組围俘，fragment砸讳。
optionalNode: PropTypes.node,
// 指定類型為：一個(gè)react 元素
optionalElement: PropTypes.element,
//你可以類型為某個(gè)類的實(shí)例琢融，這里使用JS的instanceOf操作符實(shí)現(xiàn)
optionalMessage: PropTypes.instanceOf(Message),
//指定枚舉類型：你可以把屬性限制在某些特定值之內(nèi)
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 指定多個(gè)類型：你也可以把屬性類型限制在某些指定的類型范圍內(nèi)
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 指定某個(gè)類型的數(shù)組
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 指定類型為對(duì)象，且對(duì)象屬性值是特定的類型
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
//指定類型為對(duì)象簿寂，且可以規(guī)定哪些屬性必須有漾抬，哪些屬性可以沒(méi)有
optionalObjectWithShape: PropTypes.shape({
optionalProperty: PropTypes.string,
requiredProperty: PropTypes.number.isRequired
}),
// 指定類型為對(duì)象，且可以指定對(duì)象的哪些屬性必須有常遂，哪些屬性可以沒(méi)有纳令。如果出現(xiàn)沒(méi)有定義的屬性，會(huì)出現(xiàn)警告克胳。
//下面的代碼optionalObjectWithStrictShape的屬性值為對(duì)象平绩，但是對(duì)象的屬性最多有兩個(gè)，optionalProperty 和 requiredProperty漠另。
//出現(xiàn)第三個(gè)屬性捏雌，控制臺(tái)出現(xiàn)警告。
optionalObjectWithStrictShape: PropTypes.exact({
optionalProperty: PropTypes.string,
requiredProperty: PropTypes.number.isRequired
}),
//加上isReqired限制笆搓，可以指定某個(gè)屬性必須提供性湿，如果沒(méi)有出現(xiàn)警告。
requiredFunc: PropTypes.func.isRequired,
requiredAny: PropTypes.any.isRequired,
// 你也可以指定一個(gè)自定義的驗(yàn)證器满败。如果驗(yàn)證不通過(guò)肤频，它應(yīng)該返回Error對(duì)象，而不是`console.warn `或拋出錯(cuò)誤葫录。`oneOfType`中不起作用着裹。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
//你也可以提供一個(gè)自定義的驗(yàn)證器 arrayOf和objectOf。如果驗(yàn)證失敗米同，它應(yīng)該返回一個(gè)Error對(duì)象骇扇。
//驗(yàn)證器用來(lái)驗(yàn)證數(shù)組或?qū)ο蟮拿總€(gè)值。驗(yàn)證器的前兩個(gè)參數(shù)是數(shù)組或?qū)ο蟊旧砻媪福€有對(duì)應(yīng)的key少孝。
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
3. 限制單個(gè)子元素
使用 PropTypes.element 你可以指定只有一個(gè)子元素可以被傳遞給組件。
//將children限制為單個(gè)子元素熬苍。
Greeting.propTypes = {
name: PropTypes.string,
children: PropTypes.element.isRequired
};
如果如下方式引用Greeting組件：
//傳了兩個(gè)子元素給組件Greeting那么稍走，控制臺(tái)會(huì)出現(xiàn)警告
<Greeting name={'world'}>
<span>子元素1</span>
<span>子元素2</span>
</Greeting>
警告如圖：
WechatIMG199.jpeg
4.指定默認(rèn)屬性值。
你可以給組件分配一個(gè)特殊的defaultProps屬性柴底。
//給Greeting屬性中的name值指定默認(rèn)值婿脸。當(dāng)組件引用的時(shí)候，沒(méi)有傳入name屬性時(shí)柄驻，會(huì)使用默認(rèn)值狐树。
Greeting.defaultProps = {
name: 'Stranger'
};
// ES6可以這樣寫(xiě)
class Greeting extends React.Component {
static defaultProps = {
name: 'stranger'
}
render() {
return (
<div>Hello, {this.props.name}</div>
)
}
}
