如何使用PropTypes来设置一个道具的必要类型🏠 回到主页如何使用PropTypes来设置一个道具的必要类型由

如何使用PropTypes来设置一个道具的必要类型

由于JavaScript是一种动态类型的语言，我们其实没有办法在编译时强制执行变量的类型，如果我们传入无效的类型，在运行时就会失败，或者在类型兼容但不是我们所期望的情况下给出奇怪的结果。

Flow和TypeScript帮助很大，但React有办法直接帮助处理道具类型，甚至在运行代码之前，我们的工具（编辑器、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.数字
PropTypes.object
先知类型.字符串
PropTypes.符号

我们可以接受两种类型中的一种。

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

我们可以接受许多值中的一个。

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

我们可以接受一个类的实例。

PropTypes.instanceOf(Something)

我们可以接受任何React节点。

甚至是任何类型。

数组有一个特殊的语法，我们可以用它来接受一个特定类型的数组。

PropTypes.arrayOf(PropTypes.string)

对象，我们可以通过使用以下方式组成一个对象的属性

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

要求属性

在任何PropTypes选项中添加isRequired ，如果缺少该属性，React将返回一个错误。

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