如何使用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,