一、使用環(huán)境
- Mac 電腦 系統(tǒng)10.14.2
- Xcode9.4
- react-native-cli版本 2.0.1
- react-native: 0.57.3
- webstorm
二读恃、PropTypes的簡(jiǎn)介
- 1.自定義組件的時(shí)候暴露屬性到外界時(shí)候,外界調(diào)用組件具有屬性提示;
- PropTypes提供很多驗(yàn)證器,可以驗(yàn)證輸入內(nèi)容的類型等,當(dāng)前檢測(cè)到類型不對(duì)時(shí)候,控制臺(tái)會(huì)警告,但是不會(huì)報(bào)錯(cuò)
PropTypes的使用注意
- PropTypes必須要用static聲明寺惫，否則無效果
2 在.React v15.5,PropTypes被從react庫中拿了出來,單獨(dú)放在了一個(gè)名為prop-types的庫中,意味著導(dǎo)入方式變了
React v15.5之前,PropTypes屬于react庫
import { PropTypes } from 'react';
- ReactV15.5 之后 PropTypes屬于prop-types庫
import PropTypes from 'prop-types'
三西雀、PropTypes的使用步驟
- 導(dǎo)入PropTypes所在庫
import PropTypes from 'prop-types'
- 定義屬性使用,注意類型不要寫錯(cuò),誤把bool-> 寫成boolean
//定義暴露屬性,進(jìn)行類型檢查
static propTypes ={
gif: PropTypes.string,
age: PropTypes.number,
success: PropTypes.bool
}
-
使用時(shí)候提示效果 空格提示
如果需要對(duì)暴露屬性設(shè)置默認(rèn)值,可以使用defaultProps
static defaultProps={
gif: '沒有禮物',
age: 20,
success: false
}
四艇肴、屬性類型PropTypes注解
# 數(shù)組類型
PropTypes.array
# 布爾類型
PropTypes.bool
# 函數(shù)類型
PropTypes.func
# 數(shù)值類型
PropTypes.number
# 對(duì)象類型
PropTypes.object
# 字符串類型
PropTypes.string
# 規(guī)定prop為必傳字段
PropTypes.func.isRequired
# prop可為任意類型, 任意不為空對(duì)象
PropTypes.any
#數(shù)組中元素的類型
PropTypes.any. arrayOf()
#React 元素
PropTypes.element
#類實(shí)例
PropTypes.instanceOf()
#每個(gè)值的類型都是基本類型
PropTypes.node
#參數(shù)是數(shù)組, 指定傳的數(shù)據(jù)為數(shù)組中的值,可以當(dāng)做枚舉類型使用
PropTypes.oneOf()
e.g-比如
color: PropTypes.oneOf(['red', 'blue', 'black'])
# 參數(shù)是數(shù)組, 指定傳的數(shù)據(jù)為數(shù)組中的類型
PropTypes.oneOfType()
# 指定對(duì)象類型內(nèi)部的結(jié)構(gòu)定義
PropTypes.shape()
e.g-比如
model:PropTypes.shape(
{
id: PropTypes.string,
name: PropTypes.string
}
)
其他資料
ReactNative從零開始筆記1-初始化項(xiàng)目
ReactNative從零開始筆記2-組件的生命周期
ReactNative從零開始筆記3-state(狀態(tài))與props(屬性)
ReactNative從零開始筆記4-PropTypes使用
ReactNative從零開始筆記5-組件傳值(父子組件/兄弟組件)
ReactNative從零開始筆記6-導(dǎo)航頁面?zhèn)髦担ㄕ齻骱湍鎮(zhèn)鳎?/a>
