react中使用prop-types檢測props數據類型

一、為什么使用prop-types

在多人開發時，當被人使用自己定義的組件時，有可能出現類型傳錯的情況，而在自己的組件上加上prop-types，他可以對父組件傳來的props進行檢查，加入父組件中想傳遞的是字符串類型‘3’，而傳遞了一個數字類型3，如果沒有類型檢查系統不會給與提示，但是有了類型檢查以后，再控制台會給你一個類型傳遞錯誤的提示。這樣在工作中可以快速找到錯誤。

二、學習文檔

https://www.npmjs.com/package/prop-types npm官網
https://reactjs.org/docs/typechecking-with-proptypes.html react官方

三、安裝與引入

//安裝 npm install prop-types --save //引入 import PropTypes from 'prop-types'; 

四、它可以檢測的類型

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 { //如果沒有傳遞該屬性時的默認值 static defaultProps = { name: 'stranger' } //如果傳遞該屬性，該屬性值必須為字符串 static propTypes={ name:PropTypes.string } render() { return ( <div>Hello, {this.props.name}</div> ) } } 

七、使用isRequired設置屬性為必須傳遞的值

 static propTypes={ name:PropTypes.string.isRequired } 

八、arrOf和objectOf多重嵌套類型檢測

  // 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檢測不同對象的不同屬性的不同數據類型

  // 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 }) } 

 

 

13人點贊

 

react

 

 

"小禮物走一走，來簡書關注我"

作者：500薪水程序員
鏈接：https://www.jianshu.com/p/a73fb26c88b5
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。