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 表示是必須的