新增:

在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 
 
= {
        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。