你用過 PropTypes 的這些型別檢查麼？

張倩qianniuer發表於2018-12-16
原文網址 : https://juejin.im/post/5c1674a3e51d4524851c7148
型別
你用過 PropTypes 的這些型別檢查麼？
你用過 PropTypes 的這些型別檢查麼？

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


為什使用prop-types：

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


0
1

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

0
2


然後通過下面的寫法對你的某一個元件的道具中的變數進行型別檢測


image.png


0
3

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


image.png


要在元件中進行型別檢測，你可以負值propTypes屬性，

ES7中使用：


image.png


  • 使用isRequired設定屬性為必須傳遞的值

image.png

  • shape檢測不同物件的不同屬性的不同資料類

    型

image.png

  • arrOf和objectOf多重巢狀型別檢測

image.png


你用過 PropTypes 的這些型別檢查麼？


相關文章