反应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,

免费下载我的反应手册

反应PropTypes

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

我们可以使用哪些类型

要求属性

更多反应教程：