你用過 PropTypes 的這些類型檢查麼?

你用過 PropTypes 的這些類型檢查麼?

從React15.5起,React.PropTypes被移入到單獨的package中。react提供了一個package(prop-types)去檢查props的類型。react


爲什使用prop-types

在多人開發時,當被人使用本身定義的組件時,有可能出現類型傳錯的狀況,而在本身的組件上加上prop-types,他能夠對父組件傳來的props進行檢查,加入父組件中想傳遞的是字符串類型‘3’,而傳遞了一個數字類型3,若是沒有類型檢查系統不會給與提示,可是有了類型檢查之後,再控制檯會給你一個類型傳遞錯誤的提示。這樣在工做中能夠快速找到錯誤。web


0
1

首先你須要經過在終端npm install prop-types安裝一個叫prop-types的第三方包npm

0
2


而後經過下面的寫法對你的某一個組件的道具中的變量進行類型檢測app


image.png


0
3

prop-types提供了大量的驗證器less


image.png


要在組件中進行類型檢測,你能夠負值propTypes屬性,編輯器

ES7中使用:flex


image.png


  • 使用isRequired設置屬性爲必須傳遞的值

image.png

  • shape檢測不一樣對象的不一樣屬性的不一樣數據類

image.png

  • arrOf和objectOf多重嵌套類型檢測

image.png


相關文章
相關標籤/搜索