初識React(6):propTypes型別檢測
阿新 • • 發佈:2018-11-21
propTypes是react中用來對引數進行型別檢測的,當然要使用這個外掛,得先安裝這個外掛,如下:
npm install prop-types --save
但是如果你是直接用dva建立的專案,無需安裝,直接引入即可,如下:
import React from 'react';
import PropTypes from 'prop-types';
class PropType extends React.Component {
render() {
return (
<div>
<div>123 </div>
<div>{this.props.content}</div>
</div>
)
}
}
PropType.propTypes = {
content:PropTypes.string.isRequired
}
export default PropType;
上面那個例子中可以看出,要引入元件PropType,必須得傳入引數型別為字串的content引數,否則會報錯
import React from 'react';
import { connect } from 'dva' ;
import PropType from './propTypes/propTypes.js'
function IndexPage() {
return (
<div>
<PropType content={"123"}/>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
PropTypes常用的資料型別檢測如下:
1. 字串型別PropTypes.string
2. 布林型別PropTypes.bool
3. 函式型別PropTypes.func
4. 陣列型別PropTypes.array
5. 數字型別PropTypes.number
6. 物件型別PropTypes.object
7. 元素PropTypes.element
8. 傳入任何東西都可以PropTypes.node
9. 選擇特定值PropTypes.oneOf([‘是’, ‘否’, “是否”])
10. 選擇諸多型別中的一種(任意型別)PropTypes.oneOfType:
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
- 具有某種型別的陣列PropTypes.arrayOf(PropTypes.number):
PropTypes.arrayOf(PropTypes.number)
- 具有某種型別屬性值的物件PropTypes.objectOf(React.PropTypes.number)
PropTypes.objectOf(React.PropTypes.number)
- 樣式型別PropTypes.shape
PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
- 任何資料型別PropTypes.any.isRequired
注意: isRequired表示必要的引數,如果設定了isRequired沒有引數傳過來,則會報錯
PropTypes比較常用的應該就是以上那些型別了,如果後期有新發現會不間斷更新文章。