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