PropTypes是react中子元件對父元件傳遞來的值進行的驗證，在專案沒有整合ts/flow的情況下可以使用，且react中已原生支援

匯入

import PropTypes from 'prop-types'  //由於是export default匯出，可以重新命名

使用

1. 型別驗證

//宣告一個子元件
const Son = props => (<div>這是父元件接收來的資料：{props.name}</div>)

//使用propTypes對子元件接收的資料進行驗證,propTypes須小寫

Son.propTypes = { 
  name: PropTypes.string  // 這意味著,傳入的必須是string型別
}

 

如果父元件傳入的型別不是PropTypes規定的型別，將會直接在控制檯報錯:

以上圖為例，假設父元件傳遞了一個Boolean...

2. 是否必傳

//宣告一個子元件
const Son = props => (<div>這是父元件接收來的資料：{props.name}</div>)

//使用propTypes對子元件接收的資料進行驗證,propTypes須小寫

Son.propTypes = { 
  name: PropTypes.string.isRequired  // 這意味著,傳入的必須是string型別
}

如果沒有傳入子元件規定的必傳項會報以下錯:

以上。