反应PropTypes

如何使用PropTypes设置所需的道具类型

由于JavaScript是一种动态类型的语言,因此我们实际上没有办法在编译时强制使用变量的类型,并且如果我们传递无效的类型,则它们将在运行时失败,或者如果类型兼容则给出怪异的结果,但是我们所期望的。

流和打字稿可以提供很多帮助,但是React可以直接帮助props类型,甚至在运行代码之前,我们的工具(编辑器,lints)也可以检测到何时传递了错误的值:

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,

免费下载我的反应手册


更多反应教程: