随着前端技术的不断发展，我们经常会需要使用大量的第三方库和组件，这些组件很可能接收一组固定的 props，这些 props 通常是有具体类型和限制条件的。在应用开发中有时候需要对这些 props 进行校验，以确保传入的数据符合预期。此时使用 prop-schema 这个 npm 包就会变得相当有效和方便。
什么是 prop-schema？
prop-schema 是一个小巧的 npm 包，它提供了一种简单的方法来验证 JavaScript 对象和数组的形式属性。
prop-schema 可以被用来校验传递给接收数据的 React 组件的 props，以验证 GraphQL 请求的输入数据等等。
安装
使用以下命令安装 prop-schema：
--- - -----------
使用示例
以下示例说明了如何使用 prop-schema 来验证一个接收多个 props 的 React 组件，即 PropsContainer。
------ - ------ ------- ------ - ---- -------------
------ ------- -------- --------------------- -
----- -
-----
----
--------
-----
- - -----
----- ------ - -------
----- ------------------
---- ------------------ ---------------
-------- -------
------ -----------------------------------
--
-- -------- -----
-----------------
-----
----
--------
-----
--
------ -
-- ---
-
-如上所示，在以上示例代码中，我们导入了需要验证的类型：shape，string，和 number。这三个接口都是由 prop-schema 提供的。
在 PropsContainer 组件中，我们定义了四个 props：
name: 字符串，为必需项age: 数字，必须在 18 ~ 99 之间，并且为必需项address: 字符串，可选项phone: 字符串，必须符合手机格式
我们使用 shape() 聚合一个对象，以及使用各种验证器包装不同的类型和属性。
在执行 schema.validate() 后，如果传递的 prop 不符合要求，将会抛出一个有关错误的异常。如果所有验证都通过，则组件可以继续渲染。
prop-schema 的 API
prop-schema 提供了一些验证类型，可以用于构建验证规则，以下是一些常用的 API：
string
.trim()
从字符串的开头和结尾删除空格。
.toLowerCase()
将字符串转换为小写。
.toUpperCase()
将字符串转换为大写。
.isRequired
确定必须提供某个属性。如：
----- ------ - ------- ----- ----------------- ---
number
.between(min, max)
限定数字的范围。如：
----- ------ - ------- ---- ------------------ --- ---
最小值和最大值都是必须的。
.isRequired
确定必须提供一个属性。如：
----- ------ - ------- ---- ----------------- ---
boolean
.isRequired
确定必须提供一个属性。如：
----- ------ - ------- -------- ------------------ ---
array
.includes(itemSchema)
定义了数组的项的模式。如：
----- ------ - ------- ------- ---------------------- ---
这将验证数组 items 是否都是字符串。
object
.keys(schemaOfKeys)
确定对象包含的键和值是否符合指定的模式。如：
----- ------ - -------
----- -------------
----- ------------------
---- -----------------
--
---这将验证 user 对象是否包含指定的键和值，如果不是，则抛出一个错误。
其他命令
其他命令包括：.matches()，.isEmail()，.isURL()，.isIPAddress()，.isNumber()，.length()，.regex() 等。
结论
以上是关于 prop-schema npm 包的一些介绍和使用方法，相信你已经掌握了它的基本使用方法。prop-schema 可以简化我们的开发流程，提高代码质量。当然，如果你想进一步使用 prop-schema，可以在官网寻找更多的 API 用法，以及遇到问题时如何解决。祝学习愉快！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f729e85a9b7065299ccbbad