如何使用PropTypes設置prop的要求類型
由於JavaScript是一種動態類型的語言,我們實際上沒有辦法在編譯時強制變量的類型,如果我們傳遞無效類型,它們將在運行時失敗,或者如果類型是兼容的但不是我們期望的類型時,將會得到奇怪的結果。
Flow和TypeScript在這方面提供了很大的幫助,但React有一種直接幫助處理props類型的方法,即使在運行代碼之前,我們的工具(編輯器,linters)可以檢測到我們傳遞了錯誤的值:
import PropTypes from 'prop-types'
import React from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}
BlogPostExcerpt.propTypes = {
title: PropTypes.string,
description: PropTypes.string
}
export default BlogPostExcerpt
哪些類型可以使用
這些是我們可以接受的基本類型:
- PropTypes.array
- PropTypes.bool
- PropTypes.func
- PropTypes.number
- PropTypes.object
- PropTypes.string
- PropTypes.symbol
我們可以接受兩種類型中的其中一種:
PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
我們可以接受多個值中的一個:
PropTypes.oneOf(['Test1', 'Test2']),
我們可以接受一個類的實例:
PropTypes.instanceOf(Something)
我們可以接受任何React節點:
PropTypes.node
甚至可以接受任何類型:
PropTypes.any
數組有一種特殊的語法,我們可以使用它來接受特定類型的數組:
PropTypes.arrayOf(PropTypes.string)
對於對象,我們可以通過以下方式組合對象的屬性:
PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})
要求屬性
將isRequired
添加到任何PropTypes選項中,如果該屬性缺失,React將返回一個錯誤:
PropTypes.arrayOf(PropTypes.string).isRequired,
PropTypes.string.isRequired,