React學習手記2-屬性校驗和預設屬性

雨田666發表於2019-02-26
React

##  屬性校驗

props是元件對外暴露的介面，所以介面型別很重要，否則不利於組建的複用。React提供了校驗的方法。

import PropTypes form "prop-types"
class Index extends React.Component {
    //...
}
Index.propTypes = {
    post: PropTypes.object,
    onVote: PropTypes.func
}複製程式碼

PropTypes支援的型別有一下：

string/number/boolean/function/object/array/symbol/element(react 元素）/node(可被渲染的節點：數字、字串、react元素或這些型別的資料組成的陣列）

同時 還支援更詳細的型別要求和必需配置，如下

Index.propTypes = {
    post: PropTypes.object,
    onVote: PropTypes.func.isRequired,
    content: PropTypes.shape({  //物件包含的屬性及型別
        id: PropTypes.number，
        title： PropTypes.string    }).isRequired，
    list: PropTypes.arrayOf(PropTypes.number)    //陣列的元素是數字 
}複製程式碼


## 預設屬性

可能在初始化state的時候要用到props傳入的預設值，一般這樣寫  

this.state = {
    name: props.name || "admin"
}複製程式碼

我們可以這樣定義預設值,以防沒有傳入props

Index.defaultProps = {
    name: "admin"
}複製程式碼


相關文章