React PropTypes 定義元件的屬性型別和預設屬性
阿新 • • 發佈:2019-02-06
新增:
在React 16版本之後, PropTypes 從react包 換到了prop-types 包中,所以想要使用PropTypes 需要這樣:
yarn add prop-types
在需要引入的地方使用:
import PropTypes from 'prop-types';
我們在定義元件的時候,通常會給它傳屬性,比如作為FlatList,Listview的item或者要匯入到其他位置的時候,都需要給這個item元件傳遞值,有的時候,可能我們傳值會的值沒有定義,打個比方:
<FlatList style={{backgroundColor:'#999999',width:250}} data={[{name: 'a',age:11}, {name: 'b'},{}]} renderItem={({item}) => <Item name={item.name} age={item.age}/>} />
我們有一個顯示人的姓名和年齡的List列表,
上面我們可以看到,第二個物件沒有age,第三個物件什麼都沒有。
如果子元件直接用的話,第二行 的age那裡就是空的,第三行都是空的。
看一下子元件的程式碼:
export default class Item extends React.PureComponent { static defaultProps第一個方法:defaultProps= { name: 'item', age:18 }; static propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number.isRequired, }; render() { let {name,age} = this.props; return ( <View style={{flexDirection:'row'}}> <Text>name:{name} , </Text><Text>age:{age}</Text> </View> ) } }
給物件設定預設屬性,如果傳來的物件沒有對應值,則把這裡的屬性賦值給該物件。
第二個方法:propTypes
設定props的型別,如上:name規定為string型別,isRequeired是說明該值不能為空,必須傳遞
如果為空,會有個提示,當然,這個提示在debug模式才會有 方便開發
如果沒有第一個方法,那麼不傳會有錯誤提示,有的話會直接賦值給空物件。
設定了這兩個,就不會有空值了。
另外需要注意的是 如果沒有使用defaultProps , 那麼呼叫子元件時 ,如果沒有傳遞對應屬性,又沒有用isrequired來限制,比如 : name為null或者為undefined 是不會報警告的.
注意為了效能考慮,只在開發環境驗證 propTypes
。