ReactJS - props 验证
程序中耗时的过程之一是查找错误的根本原因。在 React 中，props 被广泛使用。组件的 props 有不同的来源。一些组件有静态 props，而一些组件有来自直接父组件的动态 props。错误的来源之一是 props 的值与开发人员设计的 props 类型不匹配。这种不匹配会产生很多错误。React 提供了很多选项来修复这个问题，其中一个功能就是 PropTypes 及其验证。
在本章中，我们将学习什么是 PropTypes 以及如何使用它来创建无错误的 React 应用程序。
PropTypes
React 社区提供了一个特殊的包 prop-types 来解决属性类型不匹配问题。 prop-types 允许通过组件内部的自定义设置 (propTypes) 指定组件属性的类型。例如，可以使用 PropTypes.number 选项指定数字类型的属性，如下所示。
Sum.propTypes = {
num1: PropTypes.number,
num2: PropTypes.number
}
一旦指定了属性的类型，React 将在应用程序的开发阶段发出警告。
让我们在应用程序中包含 propTypes，看看它如何帮助捕获属性类型不匹配问题。
首先，创建一个新的 React 应用程序并使用以下命令启动它。
create-react-app myapp cd myapp npm start
接下来，使用节点包管理器 (npm) 安装 prop-types 包，如下所示 −
npm i prop-types --save
接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。然后，创建一个简单的组件 Sum (src/Components/Sum.js)，如下所示 −
import React from 'react'
import PropTypes from 'prop-types'
class Sum extends React.Component {
render() {
return <p>The sum of {this.props.num1} and {this.props.num2}
is {parseInt(this.props.num1) + parseInt(this.props.num2)}</p>
}
}
Sum.propTypes = {
num1: PropTypes.number,
num2: PropTypes.number
}
export default Sum
这里，
该组件的目的是找到给定 props(num1 和 num2)的总值并将其显示在前端。
使用 propTypes 将 num1 和 num2 的数据类型设置为数字(PropTypes.number)。
接下来，打开 App 组件(src/App.js)，导入 bootstrap css 并呈现日期选择器，如下所示 −
import './App.css'
import Sum from './Components/Sum'
function App() {
return (
<div className="container">
<div style={{ padding: "10px" }}>
<div>
<Sum num1="10" num2="John" />
</div>
</div>
</div>
);
}
export default App;
在这里，我们用 10 和 John 作为 props 渲染了 Sum 组件
最后，在您最喜欢的浏览器中打开应用程序，并通过开发人员工具打开 JavaScript 控制台。JavaScript 会发出警告，提示提供了意外类型，如下所示。
propTypes 仅在开发阶段起作用，以消除由于额外检查 props 类型而导致的应用程序性能下降。这不会影响应用程序在生产/实时设置中的性能。
可用的验证器
prop-types 提供了大量现成的验证器。它们如下 −
PropTypes.array
PropTypes.bigint
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.symbol
PropTypes.node - 任何可以渲染的内容
PropTypes.element - React 组件
PropTypes.elementType - React 组件的类型
PropTypes.instanceOf() - 实例指定的类
propTypes.oneOf(['Value1', 'valueN']) - Value 和 ValueN 之一
PropTypes.oneOfType([]) - 示例，PropTypes.oneOfType([PropTypes.number, PropTypes.bigint])
PropTypes.arrayOf() - 示例，PropTypes.arrayOf(PropTypes.number)
PropTypes.objectOf() - 示例， PropTypes.objectOf(PropTypes.number)
PropTypes.func.isRequired
propTypes.element.isRequired
PropTypes.any.isRequired
自定义验证器
还可以创建自定义验证器并用于验证属性的值。假设组件具有电子邮件属性，其值应为有效的电子邮件地址。然后，可以编写验证函数并将其附加到电子邮件属性，如下所示 −
Sum.propTypes = {
num1: PropTypes.number,
num2: PropTypes.number,
email: function(myProps, myPropName, myComponentName) {
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(myProps[myPropName])) {
return new Error(
'Invalid prop value `' + myProps[myPropName] + '` supplied to' +
' `' + myComponentName + '/' + myPropName + '`. Validation failed.'
);
}
}
}
这里，
/^[^\s@]+@[^\s@]+\.[^\s@]+$/ 是一个简单的正则表达式电子邮件模式。
myProps 表示所有属性。
myPropName 表示当前正在验证的属性。
myComponentName 表示正在验证的组件的名称。
同样，可以使用以下函数签名 − 创建自定义验证器并将其用于数组和对象属性
PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { ... })
这里，
propValue 表示数组/对象值。
key 表示当前项的键。
componentName 表示组件的名称。
propFullName 表示正在验证的属性的名称。
总结
Props 类型是开发人员编写无错误软件的好工具之一。它肯定会帮助开发人员更快、更安全地编写代码。
