iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
Modern Web

被 React react 的後端工程師系列 第 20

[DAY20] 過來讓我看看之 PropTypes 驗證元件屬性之這是我們之間的秘密

  • 分享至 

  • xImage
  •  

在組件間傳值的時候,當組件間關係越來越複雜時
傳入參數值的正確性就變得很重要了,如果這個環節出錯
一般稱為業務邏輯錯誤,這代表你程式寫的語法是對的
但是錯的是你的業務邏輯,程式只會照你寫的跑

React.PropTypes 提供了多組驗證器來規範參數的型別與狀態
首先要先引入指定的內容,如果有裝先前說的插件,快速鍵是 impt

import PropTypes from 'prop-types'

然後就可以在子組件的 export 之前的最下面不是 class 內喔!撰寫以下程式

MassageService.propTypes={
  massageService:PropTypes.string,
  deleteService:PropTypes.func,
  index:PropTypes.number
}

這時候如果驗證的內容符合,就不會報錯
若是不符合的話
會在 Consloe 中看到錯誤,例如
Warning: Failed prop type: Invalid prop 'index' of type 'number' supplied to 'MassageService', expected 'string'.
這倒是跟 Laravel 超像,有種熟悉的感覺

isRequired

如果有某個元素是必須傳遞的,可以使用

name:PropTypes.string.isRequired

這種方式把驗證邏輯串接起來,真的跟 Laravel 有夠像

defaultProps

如果需要設定預設的 props,就使用 defaultProps

MassageService.defaultProps = {
    name:'杰哥'
}

如此就有了預設的資料!如果沒傳值進來就會使用預設值
例如沒設定按摩服務的師傅名稱什麼的

這是一些基本的使用,更多更詳細的內容可以看官方文件寫得很詳細


上一篇
[DAY19] 單向資料流之鮭魚逆流而上被石頭敲到不就_頭好痛
下一篇
[DAY21] 禁斷關係之 ref 之非必要不用之遇到難關的時候你可以再想想
系列文
被 React react 的後端工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言