一定要寫PropTypes，切莫為了省事而不寫
如果一個Props不是requied，一定在getDefaultProps中設置它
React.PropTypes主要用來驗證組件接收到的props是否為正確的數據類型，如果不正確，console中就會出現對應的warning。出于性能方面的考慮，這個API只在開發環境下使用。

基本使用方法：

propTypes: {myArray: React.PropTypes.array,myBool: React.PropTypes.bool,myFunc: React.PropTypes.func,myNumber: React.PropTypes.number,myString: React.PropTypes.string，// 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 }

假如我們props不是以上類型，而是擁有復雜結構的對象怎么辦？比如下面這個：

{text: 'hello world',numbers: [5, 2, 7, 9], }

當然，我們可以直接用React.PropTypes.object,但是對象內部的數據我們卻無法驗證。

propTypes: {myObject: React.PropTypes.object, }

進階使用方法：shape() 和 arrayOf()

propTypes: {myObject: React.PropTypes.shape({text: React.PropTypes.string,numbers: React.PropTypes.arrayOf(React.PropTypes.number),}) }

下面是一個更復雜的Props：

[{name: 'Zachary He',age: 13,married: true,},{name: 'Alice Yo',name: 17,},{name: 'Jonyu Me',age: 20,married: false,} ]

綜合上面，寫起來應該就不難了：

propTypes: {myArray: React.PropTypes.arrayOf(React.propTypes.shape({name: React.propTypes.string.isRequired,age: React.propTypes.number.isRequired,married: React.propTypes.bool})) }

轉載于:https://www.cnblogs.com/Lewiskycc/p/7411326.html

總結

以上是生活随笔為你收集整理的react使用 PropTypes 和 getDefaultProps()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。