一僵腺、為什么使用prop-types
在多人開(kāi)發(fā)時(shí)鲤孵，當(dāng)被人使用自己定義的組件時(shí)，有可能出現(xiàn)類(lèi)型傳錯(cuò)的情況辰如，而在自己的組件上加上prop-types普监，他可以對(duì)父組件傳來(lái)的props進(jìn)行檢查，加入父組件中想傳遞的是字符串類(lèi)型‘3’琉兜，而傳遞了一個(gè)數(shù)字類(lèi)型3凯正，如果沒(méi)有類(lèi)型檢查系統(tǒng)不會(huì)給與提示，但是有了類(lèi)型檢查以后豌蟋，再控制臺(tái)會(huì)給你一個(gè)類(lèi)型傳遞錯(cuò)誤的提示廊散。這樣在工作中可以快速找到錯(cuò)誤。
二梧疲、學(xué)習(xí)文檔
https://www.npmjs.com/package/prop-types npm官網(wǎng)
https://reactjs.org/docs/typechecking-with-proptypes.html react官方
三允睹、安裝與引入
//安裝
npm install prop-types --save
//引入
import PropTypes from 'prop-types';
四、它可以檢測(cè)的類(lèi)型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
五幌氮、class定義中使用方法
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')
);
六缭受、ES7中使用方法示例
class Greeting extends React.Component {
//如果沒(méi)有傳遞該屬性時(shí)的默認(rèn)值
static defaultProps = {
name: 'stranger'
}
//如果傳遞該屬性，該屬性值必須為字符串
static propTypes={
name:PropTypes.string
}
render() {
return (
<div>Hello, {this.props.name}</div>
)
}
}
七该互、使用isRequired設(shè)置屬性為必須傳遞的值
static propTypes={
name:PropTypes.string.isRequired
}
八米者、arrOf和objectOf多重嵌套類(lèi)型檢測(cè)
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
//示例
static propTypes = {
todoList:PropTypes.arrayOf(PropTypes.shape({
id:PropTypes.string.isRequired,
text:PropTypes.string
}))
}
九、shape檢測(cè)不同對(duì)象的不同屬性的不同數(shù)據(jù)類(lèi)型
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
optionalProperty: PropTypes.string,
requiredProperty: PropTypes.number.isRequired
}),
//示例
static propTypes = {
object:PropTypes.shape({
name:PropTypes.string,
age:PropTypes.number
})
}
