如何对 ReactJS 中的 Props 应用验证？

React JS 中验证 Props 的需求： Props 用于将只读属性传递给 React 组件。为了组件的正常运行并避免将来出现错误和故障，正确传递道具是必要的。因此，需要使用 props 验证来提高 React 组件的性能。

React JS 具有用于验证 props 数据类型的内置功能，以确保通过 props 传递的值是有效的。 React 组件有一个名为propTypes的属性，用于设置数据类型验证。

语法：使用propTypes的语法如下所示。

class Component extends React.Component {
  render() {}
}

Component.propTypes = {/* definition goes here*/};

验证器： propTypes 对象包含基本数据类型的验证器列表，其中一些是：

• PropTypes.any ：这意味着 prop 可以是任何数据类型。
• PropTypes.bool：这意味着道具应该是一个布尔值。
• PropTypes.number：这意味着道具应该是一个数字。
• 道具类型。字符串：这意味着道具应该是一个字符串。
• PropTypes.func：这意味着道具应该是一个函数。
• PropTypes.array：这意味着道具应该是一个数组。
• PropTypes.object：这意味着道具应该是一个对象。
• PropTypes.symbol：这意味着道具应该是一个符号。
• PropTypes.instanceOf：这意味着 prop 应该是特定 JavaScript 类的实例。
• PropTypes.isRequired：这意味着应该提供道具。
• PropTypes.oneOf()：这意味着道具应该是几种类型的指定值之一。
• PropTypes.element：这意味着道具必须是一个元素。

创建 React 应用程序并安装模块：

第 1 步：通过在终端中键入以下命令来创建一个 React 应用程序：

npx create-react-app PropValidation

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

cd PropValidation

第 3 步：创建 ReactJS 应用程序后，使用以下命令安装所需的模块。

npm install prop-types

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。在这里，我们定义了组件的 props 类型以及默认的 props。

Javascript

import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
  render() {
    return (
      

        
Welcome to GFG!!
        
ReactJS Props validation example
        
          
            
            
            
          
          
            
            
            
          
          
            
            
            
          
          
            
            
            
          
          
            
            
            
          
          
            
            
            
          
        
Type
Value
Valid
Array
{this.props.propArray}
{this.props.propArray ? "true" : "False"}
Boolean
{this.props.propBool ? "true" : "False"}
{this.props.propBool ? "true" : "False"}
Function
{this.props.propFunc(5)}
{this.props.propFunc(5) ? "true" : "False"}
String
{this.props.propString}
{this.props.propString ? "true" : "False"}
Number
{this.props.propNumber}
{this.props.propNumber ? "true" : "False"}
      
    );
  }
}
  
// Prop types for our Component
App.propTypes = {
  propArray: PropTypes.array.isRequired,
  propBool: PropTypes.bool.isRequired,
  propFunc: PropTypes.func,
  propNumber: PropTypes.number,
  propString: PropTypes.string,
}
  
// Default Props for our Component
App.defaultProps = {
  propArray: [1, 2, 3, 4, 5],
  propBool: true,
  propFunc: function (x) { return x * 10 },
  propNumber: 1,
  propString: "GFG",
}
  
export default App;

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

npm start

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

输出图像

参考： https://reactjs.org/docs/typechecking-with-proptypes.html