react使用 PropTypes 和 getDefaultProps()


一定要寫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
        })
    )
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM