1. 程式人生 > >初識React(6):propTypes型別檢測

初識React(6):propTypes型別檢測

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
  ]),
  1. 具有某種型別的陣列PropTypes.arrayOf(PropTypes.number):
PropTypes.arrayOf(PropTypes.number)
  1. 具有某種型別屬性值的物件PropTypes.objectOf(React.PropTypes.number)
PropTypes.objectOf(React.PropTypes.number)
  1. 樣式型別PropTypes.shape
PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  })
  1. 任何資料型別PropTypes.any.isRequired

注意: isRequired表示必要的引數,如果設定了isRequired沒有引數傳過來,則會報錯

PropTypes比較常用的應該就是以上那些型別了,如果後期有新發現會不間斷更新文章。