使用 PropTypes 进行 ReactJS 类型检查 – 第 3 组

在之前的文章ReactJS Typechecking With PropTypes – Set 2中，我们讨论了实例验证、单个和多个数据类型验证、类型和形状验证以及 props 中的精确验证。在本文中，我们将讨论传递任何东西的验证、必需的验证和 props 的自定义验证。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

所需模块：在使用 PropTypes 之前，我们必须通过在终端中输入给定的命令来安装它。

npm install prop-types --save

示例 1：在 props 中传递任何数据类型

我们可以使用此方法验证任何数据类型的 prop，无论是数字、字符串、符号、数组、对象等。这意味着我们可以将任何有效的数据类型作为组件内部的 props 传递。

App.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
  
// Component
class ProfitComponent extends Component {
  render() {
   return (
      

        {/* Printing the props */}
         

          {this.props.goodsNo}
         
         

          {this.props.goodsInfo}
         
      
      )
  }
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goodsNo: 67,
   goodsInfo: "GeeksForGeeks"
}
  
// Validating prop types
ProfitComponent.propTypes = {
   goodsNo: PropTypes.any,
   goodsInfo: PropTypes.any
}
  
export default ProfitComponent;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：您可以在上面的程序中看到，我们将名为goodsNo的道具作为数字传递，将goodsInfo作为字符串传递给类组件，并将它们都验证为任何数据类型。一切都在浏览器上完美呈现，并且没有出现警告消息。这清楚地告诉我们，任何值都可以在名为goodsNo和goodsInfo的props 中传递，无论是字符串、数字、数组还是对象等。

示例 2：道具内部传递的数据的必需验证

我们可以验证是否提供了道具。为此，我们使用isRequired确保在未提供 prop 或其数据类型与指定类型不同时显示警告消息。

应用程序.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
  
// Component
class ProfitComponent extends Component {
  render() {
   return (
      

        {/* Printing the props */}
         

          {this.props.goodsNo}
         
      
      )
  }
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goodsNo: "GeeksForGeeks"
}
  
// Validating prop types
ProfitComponent.propTypes = {
   goodsNo: PropTypes.number.isRequired
}
  
export default ProfitComponent;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：您可以在上面的程序中看到，我们将名为goodsNo的道具作为字符串传递，并在我们的道具中严格要求它作为数字。尽管如此，一切都在浏览器上完美呈现，但控制台中会出现一条警告消息。这清楚地告诉我们，名为goodsNo的道具严格要求数字值，但作为字符串传递。因此，我们得出结论， isRequired 方法只是验证 prop 中传递的数据的另一种方法。

示例 3：制作我们自己的 prop 验证函数或自定义验证

我们还可以指定我们自己的自定义验证或 prop 验证函数来检查哪些数据必须作为 props 在我们的组件内传递。如果验证失败，它会返回一个错误对象作为警告消息。

应用程序.js

import React, { Component } from 'react'
  
// Component
class ProfitComponent extends Component {
  render() {
   return (
      

        {/* Printing the props */}
         

          {this.props.goodsNo}
         
      
      )
  }
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goodsNo: 20
}
  
// Validating prop types
ProfitComponent.propTypes = {
   goodsNo(props, propName, component){
     if(props[propName] < 100){
        return new Error(`${propName} is smaller than 100`)
     }
   }
}
  
export default ProfitComponent;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

解释：您可以在上面的程序中看到，我们将名为goodsNo的道具作为一个值为 20 的数字传递，并在我们自己的验证函数中验证其值是否大于 100。它也称为自定义验证函数，其名称必须与我们的propName相同（在本例中为goodsNo ）。我们在函数goodsNo()中提供以下参数：

• props：它指的是我们在组件内部传递的所有道具。
• propName：它指的是我们正在为其创建此验证函数的道具，在本例中为goodsNo 。
• component：它指的是我们传递 props 的组件，在本例中是我们的类组件ProfitComponent 。

我们通过在函数中写入props[propName]来访问我们的propName goodsNo ，并验证它的值是否大于 100。由于我们的 props 值为 20，我们会在浏览器的控制台中收到我们提供的错误消息。它清楚地告诉我们，我们的名为goodsNo的 prop 的值小于 100。这样，我们可以使用用户定义的验证函数来验证传入 prop 的数据。