React PropTypes 學習筆記

在使用react做項目的時候,通常會使用prop-types輔助庫,這個庫在開發中幫助我們辨識props中屬性的類型,如果屬性值類型不正確且必須,則會拋出一個錯誤

在實際中我們這麼引入

import PropTypes from 'prop-types';

這麼使用:

MyComponent.propTypes = {
  optionalArray: PropTypes.array.isRequired,
}

這表示MyComponent組件中props.optionalArray屬性是一個array

它一共可以設置這麼多類型:

  • PropTypes.array數組
  • PropTypes.bool布爾類型
  • PropTypes.func函數
  • PropTypes.number數字
  • PropTypes.object對象
  • PropTypes.string字符串
  • PropTypes.node // 任何類型的: numbers, strings, elements 或者任何這種類型的陣列
  • PropTypes.element React 元素
  • PropTypes.instanceOf(XXX) 某種XXX類別的實體
  • PropTypes.oneOf(['foo', 'bar']) 符合其中一個字串
  • PropTypes.oneOfType([PropTypes.string, PropTypes.array]) 其中一種格式類型
  • PropTypes.arrayOf(React.PropTypes.string) 某種類型的陣列(字串類型)
  • React.PropTypes.objectOf(React.PropTypes.string) 具有某種屬性類型的物件(字串類型)
  • 是否符合指定格式
React.PropTypes.shape({                          
  color: React.PropTypes.string,
  fontSize: React.PropTypes.number
});
  • React.PropTypes.any 可以是任何格式
  • PropTypes.xxx.isRequired
    可以在所有PropTypes 属性后面加上 isRequired 表示是必須的

你可能感兴趣的:(React PropTypes 學習筆記)