npm 包 prop-schema 使用教程-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，我们经常会需要使用大量的第三方库和组件，这些组件很可能接收一组固定的 props，这些 props 通常是有具体类型和限制条件的。在应用开发中有时候需要对这些 props 进行校验，以确保传入的数据符合预期。此时使用 prop-schema 这个 npm 包就会变得相当有效和方便。

什么是 prop-schema？

prop-schema 是一个小巧的 npm 包，它提供了一种简单的方法来验证 JavaScript 对象和数组的形式属性。

prop-schema 可以被用来校验传递给接收数据的 React 组件的 props，以验证 GraphQL 请求的输入数据等等。

安装

使用以下命令安装 prop-schema：

npm i 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

确定必须提供某个属性。如：

const schema = shape({
  name: string.isRequired
});

number

.between(min, max)

限定数字的范围。如：

const schema = shape({
  age: number.between(18, 99)
});

最小值和最大值都是必须的。

.isRequired

确定必须提供一个属性。如：

const schema = shape({
  age: number.isRequired
});

boolean

.isRequired

确定必须提供一个属性。如：

const schema = shape({
  isLogin: boolean.isRequired
});

array

.includes(itemSchema)

定义了数组的项的模式。如：

const schema = shape({
  emails: array.includes(string)
});

这将验证数组 items 是否都是字符串。

object

.keys(schemaOfKeys)

确定对象包含的键和值是否符合指定的模式。如：

const schema = shape({
  user: object.keys({
    name: string.isRequired,
    age: number.isRequired
  })
});

这将验证 user 对象是否包含指定的键和值，如果不是，则抛出一个错误。

其他命令

其他命令包括：.matches()，.isEmail()，.isURL()，.isIPAddress()，.isNumber()，.length()，.regex() 等。

结论

以上是关于 prop-schema npm 包的一些介绍和使用方法，相信你已经掌握了它的基本使用方法。prop-schema 可以简化我们的开发流程，提高代码质量。当然，如果你想进一步使用 prop-schema，可以在官网寻找更多的 API 用法，以及遇到问题时如何解决。祝学习愉快！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f729e85a9b7065299ccbbad