官方提示：從React V15.5彻磁，之前的React.PropTypes會(huì)在未來(lái)版本移除玻募，請(qǐng)使用 prop-types 替代斤吐。
隨著應(yīng)用程序的增長(zhǎng)辕漂，你可以用類型檢查找到更多錯(cuò)誤浦妄。你可以為你的應(yīng)用使用第三方類型檢查庫(kù)尼摹，如：Flow、TypeScript 等剂娄。你也可以不使用它們蠢涝，因?yàn)镽eact內(nèi)嵌了一些類型檢查功能。你可以設(shè)置組件的指定屬性propTypes阅懦，為組件添加類型檢查的能力和二。
這是個(gè)簡(jiǎ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)證器。
import PropTypes from 'prop-types';
MyComponent.propTypes = {
// JS原始類型耳胎，這些全部默認(rèn)是可選的
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 可以直接渲染的任何東西惯吕，可以是數(shù)字、字符串场晶、元素或數(shù)組
optionalNode: PropTypes.node,
// React元素
optionalElement: PropTypes.element,
// 指定是某個(gè)類的實(shí)例
optionalMessage: PropTypes.instanceOf(Message),
// 可以是多個(gè)值中的一個(gè)
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 可以是多種類型中的一個(gè)
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 只能是某種類型的數(shù)組
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 具有特定類型屬性值的對(duì)象
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 具有相同屬性值的對(duì)象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// 必選條件混埠，可以配合其他驗(yàn)證器，以確保在沒有提供屬性的情況下發(fā)出警告
requiredFunc: PropTypes.func.isRequired,
// 必選條件诗轻，提供的屬性可以為任意類型
requiredAny: PropTypes.any.isRequired,
// 自定義‘oneOfType’驗(yàn)證器钳宪。如果提供的屬性值不匹配的它應(yīng)該拋出一個(gè)異常
// 注意：不能使用‘console.warn’ 和 throw
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 自定義‘a(chǎn)rrayOf’或者‘objectOf’驗(yàn)證器。
// 它會(huì)調(diào)用每個(gè)數(shù)組或者對(duì)象的key扳炬，參數(shù)前兩個(gè)是對(duì)象它本身和當(dāng)前key
// 注意：不能使用‘console.warn’ 和 throw
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.'
);
}
})
};
Single Child組件
使用PropTypes.element你可以指定你的組件必須要有一個(gè)children吏颖，而且只能有一個(gè)。
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
// 它必須是個(gè)React元素恨樟，否則會(huì)報(bào)錯(cuò)
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
}
MyComponent.propTypes = {
children: PropTypes.element.isRequired
};
defaultProps中的值
設(shè)置組件的defaultProps屬性半醉，可以為props指定默認(rèn)值：
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// 為props指定默認(rèn)值:
Greeting.defaultProps = {
name: 'Stranger'
};
// 渲染 "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
defaultProps用于確保this.props.name有一個(gè)值，如果上級(jí)組件沒有指定的話劝术。props類型檢查會(huì)發(fā)生在defaultProps解析之后缩多，所以類型檢查也適用于defaultProps。
