React PropTypes

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

我們可以接受多個值中的一個：

1	PropTypes.oneOf(['Test1', 'Test2']),

我們可以接受一個類的實例：

1	PropTypes.instanceOf(Something)

我們可以接受任何React節點：

1	PropTypes.node

甚至可以接受任何類型：

1	PropTypes.any

數組有一種特殊的語法，我們可以使用它來接受特定類型的數組：

1	PropTypes.arrayOf(PropTypes.string)

對於對象，我們可以通過以下方式組合對象的屬性：

PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

要求屬性

將isRequired添加到任何PropTypes選項中，如果該屬性缺失，React將返回一個錯誤：

1 2	PropTypes.arrayOf(PropTypes.string).isRequired, PropTypes.string.isRequired,

tags: [“React”, “PropTypes”, “Type checking”]