iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
1
Modern Web

React.js 從 【0】 到【1】推坑計畫 系列 第 7

【Day 7】型別檢查 && PropTypes

昨天講解了 props 的應用,讓子元件可以接收來自父元件的資料。
但是隨著應用規模的提升,透過型別檢查可以減少許多可能的錯誤。
要達成這個目的,許多人會選擇 flow 或 TypeScript 等 JavaScript 的擴展,但在環境設定上就相較麻煩許多,今天要介紹的是一個輕量級且 React 內建的套件 - PropTypes。

使用 PropTypes 非常簡單,我們來看一下官方的範例:

https://ithelp.ithome.com.tw/upload/images/20190911/20113277HHNHNvYskJ.png

引入 PropTypes 後在 component 下方使用鍵值對(key-value-pair)的方式定義 props 的型別,key 是 prop 的名稱,value 則是該prop 被定義的型別。

https://ithelp.ithome.com.tw/upload/images/20190911/20113277GmwgrNfBfi.png

上圖是官方中提供比較常見的型別,其實還有非常多其他型別。

想了解更詳細可以參考這個連結
PropTypes官方介紹

接著換我們自己試試看囉,昨天的 App.js中:
https://ithelp.ithome.com.tw/upload/images/20190911/20113277BnaBnoLaWZ.png

再多傳一個 title 的 prop 給 Counter component,所以現在 Counter 會有 count、setCount、title 三個prop,型別分別為 數字、函式、字串

接著更改 Counter.js:

https://ithelp.ithome.com.tw/upload/images/20190911/20113277wkZ6jhDJdE.png

非常輕易的就幫 props 加入了型別檢查,如果偷偷把傳進來的 title 改為數字,可以在 browser 的 console 看到 error
https://ithelp.ithome.com.tw/upload/images/20190911/20113277s7uAtLHOZm.png

但是 app 並不會整個 crush 掉,還是能正常執行。
因此若是應用會擴展到一定程度,還是建議使用 TypeScript 那種在編譯階段就會報型別錯誤而無法 compile 成功的 JS 擴充囉。

今天的內容就到這邊,個人認為是滿簡單但又非常重要的小技巧。
明天將介紹 class component 與 我們使用的 functional component 的差別。


上一篇
【Day 6】Child Component && Props
下一篇
【Day 8】Class component && Functional component
系列文
React.js 從 【0】 到【1】推坑計畫 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言