React版本:15.4.2
**翻譯:xiyoki **
隨著應(yīng)用程序的成長(zhǎng)秃诵,你可以通過(guò)typechecking捕捉很多bug秕狰。對(duì)于某些應(yīng)用程序屏歹,你可以使用Javascript擴(kuò)展(如Flow或TypeScript)來(lái)對(duì)整個(gè)應(yīng)用程序進(jìn)行類(lèi)型檢查认臊。但是即使你不使用這些寨辩,React也有一些內(nèi)置的typechecking能力吓懈。要在組件的props上運(yùn)行typechecking,可以指定特殊的propTypes
屬性:
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: React.PropTypes.string
};
React.PropTypes
導(dǎo)出一系列驗(yàn)證器靡狞,可用于確保接收的數(shù)據(jù)有效耻警。在這個(gè)例子中,我們正在使用React.PropTypes.string
。當(dāng)為prop提供無(wú)效值時(shí)甘穿,Javascript控制臺(tái)中將顯示警告腮恩。出于性能原因,propTypes
僅在開(kāi)發(fā)模式下檢查扒磁。
React.PropTypes
這里是一個(gè)示例庆揪,提供了不同的驗(yàn)證器:
MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: React.PropTypes.node,
// A React element.
optionalElement: React.PropTypes.element,
// You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: React.PropTypes.instanceOf(Message),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// An array of a certain type
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: React.PropTypes.func.isRequired,
// A value of any data type
requiredAny: React.PropTypes.any.isRequired,
// You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
Requiring Single Child(需要單獨(dú)的child)
對(duì)于React.PropTypes.element
,你可以指定只有一個(gè)單獨(dú)的child作為children被傳遞給組件妨托。
class MyComponent extends React.Component {
render() {
// This must be exactly one element or it will warn.
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
}
MyComponent.propTypes = {
children: React.PropTypes.element.isRequired
};
Default Prop Values(默認(rèn)的Prop值)
你可以為你的props
定義默認(rèn)的值缸榛,通過(guò)將特殊的defaultProps
屬性賦給props
:
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
// Specifies the default values for props:
Greeting.defaultProps = {
name: 'Stranger'
};
// Renders "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
defaultProps
將被用于確保this.props.name
有一個(gè)值,如果它的值不是由父組件指定兰伤。當(dāng)defaultProps
被處理后内颗,propTypes
類(lèi)型檢查將會(huì)進(jìn)行,所以類(lèi)型檢查也將適用于defaultProps
敦腔。