基本類型校驗：

　　之前的案例中，父組件向子組件傳遞的數據里，并沒有做數據類型校驗

　　

　　雖然正確傳遞和使用了，但是在子組件里并沒有做傳遞數據的類型驗證，也就是說，此時傳遞任何值都不會報錯。

開發經驗豐富的小伙伴都知道，當項目復雜性較大時，如果不對數據類型做校驗，后期很容易出現一種錯誤，即“業務邏輯錯誤”。
業務邏輯錯誤一般也是在開發時最為難找的錯誤，可能數據傳遞來傳遞去出了問題，這種問題不像語法錯誤很好找，為了避免這種錯誤，我們在開發時都要進行數據校驗。
此時便需要借助React的prop-types，如下所示，在子組件引入校驗對象并進行校驗

　　

　　這里注意PropTypes的命名法則是默認俗稱的，為了方便團隊合作，一般都會使用默認俗稱的命名

　　

　　此時便對傳遞的數據類型做了相應的校驗，如果不符合數據類型則會在控制臺出現警告提示

　　必填項校驗：接下來添加其他數據，如下所示

　　

　　如果父組件不傳遞數據，此時也不會報錯提示。這顯然是不符合開發規范的

　　

　　接下來做必填項驗證：傳遞數據為字符串類型且為必填項

　　

　　接下來進行傳遞才不會報錯

　　

　　

　　默認值校驗設置：

　　

總結

以上是生活随笔為你收集整理的React之ProtoTypes组件传值的数据类型校验的全部內容，希望文章能夠幫你解決所遇到的問題。

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