在組件間傳值的時候,當組件間關係越來越複雜時
傳入參數值的正確性就變得很重要了,如果這個環節出錯
一般稱為業務邏輯錯誤,這代表你程式寫的語法是對的
但是錯的是你的業務邏輯,程式只會照你寫的跑
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 超像,有種熟悉的感覺
如果有某個元素是必須傳遞的,可以使用
name:PropTypes.string.isRequired
這種方式把驗證邏輯串接起來,真的跟 Laravel 有夠像
如果需要設定預設的 props,就使用 defaultProps
MassageService.defaultProps = {
name:'杰哥'
}
如此就有了預設的資料!如果沒傳值進來就會使用預設值
例如沒設定按摩服務的師傅名稱什麼的
這是一些基本的使用,更多更詳細的內容可以看官方文件寫得很詳細