Comprobación de tipos de ReactJS con PropTypes – Conjunto 2

En nuestro artículo anterior ReactJS Typechecking With PropTypes – Set 1 , discutimos cómo usar PropTypes para validar los datos que recibimos de los accesorios. Pero nuestra discusión se limitó solo a validar los tipos de datos, como una array, una string, un objeto o un número. En este artículo, ampliaremos nuestra discusión y aprenderemos cómo validar elementos de React (como una instancia de una clase), valores , formas y tipos específicos y múltiples , y la validación exacta de los datos dentro de una propiedad.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Módulo requerido: Antes de usar PropTypes tendremos que instalarlo escribiendo el comando dado en la terminal.

npm install prop-types --save

Ejemplo 1: Validación de instancia con propTypes

Podemos validar la instancia de nuestro prop, es decir, verificar si el prop es una instancia de una clase o no. Veamos un ejemplo para entender esto de una mejor manera.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
  
// Sample class
class Sample {
   constructor(value) {
     this.price = value.price;
   }
}
  
// Component
 class SamplePrice extends Component { 
   render() {
     return (
        <div>
          <h1>
            {this.props.priceProp}
          </h1>
        </div>
     )
   }
 }
   
// Creating default props
SamplePrice.defaultProps = {
  priceProp: "geeksforgeeks"
}
   
 // Validating the props
 SamplePrice.propTypes = {
   priceProp: PropTypes.instanceOf(Sample)
 }
   
 // Export the Component
 export default SamplePrice;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Puede ver en el programa anterior que estamos pasando el accesorio llamado priceProp como una string en un componente de clase y validándolo como una instancia de la clase definida por el usuario Muestra , incluso entonces todo se representa perfectamente en el navegador. Pero la consola de nuestro navegador tiene un mensaje de advertencia. Este mensaje nos dice claramente que se esperaba que la propiedad denominada priceProp fuera una instancia de la clase Sample, pero en su lugar se pasa un valor de string.

Ejemplo 2: Validación de valores específicos y múltiples

Podemos validar que nuestros props deben tener unos valores específicos, es decir, su valor debe ser uno de los valores proporcionados en la colección. También podemos especificar que nuestro accesorio podría ser de cualquier tipo que se proporcione en la colección.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
  
// Component
class ProfitComponent extends Component {
  render() {
   return (
      <div>
        {/* printing the props */}
         <h1>
          {this.props.goods}
         </h1>
         <h1>
         {this.props.cost}
        </h1>
      </div>
      )
  }
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goods: 10,
   cost: "Geeks"
}
  
// Validating prop types
ProfitComponent.propTypes = {
   // Specific validation
   goods: PropTypes.oneOf([50, 'Photos']),
  
   // Multiple validation
   cost: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.number
  ])
}
  
export default ProfitComponent;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: puede ver en el programa anterior que estamos pasando la propiedad denominada bienes como un número 10 en un componente de clase y validando si tiene un valor exacto de un número 50 o una string «Fotos», incluso cuando todo se representa perfectamente en el navegador. Pero la consola de nuestro navegador tiene un mensaje de advertencia. Este mensaje nos dice claramente que se esperaba que la propiedad denominada bienes tuviera un valor exacto de 50 o «Fotos», pero en su lugar, se pasa un valor de 10. Esto se denomina validación de valor específico , es decir, la propiedad debe tener el mismo tipo de datos y el mismo valor.

También estamos pasando el costo de propiedad como una string y validando si es una array o un número, incluso cuando todo se representa perfectamente en el navegador. Pero la consola de nuestro navegador tiene un mensaje de advertencia. Este mensaje nos dice claramente que se esperaba que el costo de propiedad llamado sea una array o un número, pero en su lugar se pasa una string. Esto se denomina Validación de valores múltiples , es decir, la propiedad debe ser de uno de los tipos de datos proporcionados en la colección, pero puede tener cualquier valor.

Ejemplo 3: Validación de tipos y formas

Podemos especificar que un accesorio sea de tipo array y validar aún más si los valores de la array son de cierto tipo o no. También podemos hacerlo para más de un tipo de datos mediante la validación de formas.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
  
// Component
 class SamplePrice extends Component {
   render() {
     return (
        <div>
          <p>Type Validation</p>
  
          <h1>
           {/* Printing the props */}
            {
               this.props.ArrayProp.map((item, index)=>{
                   return (
                      <p key={index}>{item}</p>
  
                   )
               })
            }
          </h1>
  
          <p>Shape Validation</p>
  
          <h1>
           {this.props.ShapeOfProp.CarName}
          </h1>
          <h1>
           {this.props.ShapeOfProp.Price}
          </h1>
        </div>
     )
   }
 }
   
// Creating default props
SamplePrice.defaultProps = {
  ArrayProp: ["Car", "Driver", "Cost"],
  ShapeOfProp: ({CarName: "Ferrari", Price: "56"})
}
   
// Validating the props
SamplePrice.propTypes = {
   // Types validation
   ArrayProp: PropTypes.arrayOf(PropTypes.number),
     
   // Shapes validation
   ShapeOfProp: PropTypes.shape({
      CarName: PropTypes.string,
      Price: PropTypes.number
  })
 }
   
 // Export the Component
 export default SamplePrice

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: puede ver en el programa anterior que estamos pasando el accesorio llamado ArrayProp como una array de strings en un componente de clase y validándolo como una array de números, incluso cuando todo se representa perfectamente en el navegador. Pero la consola de nuestro navegador tiene un mensaje de advertencia. Este mensaje nos dice claramente que se esperaba que el accesorio llamado ArrayProp fuera una array de números, pero en su lugar se pasa como una array de strings. Esto se llama validación de tipos , es decir, podemos validar los datos que estamos pasando dentro de otro tipo de datos (por ejemplo, array, objeto).

También estamos pasando la propiedad denominada ShapeOfProp como un objeto que tiene dos parámetros CarName y Price que se espera que tengan un valor de string y número respectivamente. Nuestro navegador nos da un mensaje de advertencia para el parámetro Precio ya que hemos pasado 56 como una string, no como un número. Esto se llama Shape Validation , es decir, podemos validar los datos que estamos pasando a cada tipo de datos. 

Ejemplo 4: Validación de parámetros exactos

Podemos especificar la cantidad de parámetros que podemos proporcionar en un objeto pasado como accesorios. Esto se hace por el método exacto .

import React, { Component } from 'react'
import PropTypes from 'prop-types'
// Component
class ProfitComponent extends Component {
  render() {
   return (
      <div>
        {/* Printing the props */}
         <h1>
          {this.props.goods.name}
         </h1>
         <h1>
          {this.props.goods.quantity}
         </h1>
         <h1>
          {this.props.goods.info}
         </h1>
      </div>
      )
  }
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goods: ({
      name: "GeeksForGeeks",
      quantity: 20,
      info: "Cars Data"
   })
}
  
// Validating prop types
ProfitComponent.propTypes = {
   goods: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  })   
}
  
export default ProfitComponent;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Puede ver en el programa anterior que estamos pasando la propiedad denominada bienes como una array de objetos que tiene tres parámetros ( nombre, cantidad e información ) y validándolo como un objeto que tiene solo dos parámetros (nombre y cantidad), incluso cuando todo se representa perfectamente en el navegador. Pero la consola de nuestro navegador tiene un mensaje de advertencia. Este mensaje califica a nuestro objeto como un objeto malo y nos dice claramente que se esperaba que la propiedad llamada bienes tuviera exactamente dos parámetros, pero en cambio, tiene tres parámetros (un parámetro adicional). Esto se llama Validación de parámetros exactos , es decir, podemos decidir cuántos parámetros vamos a pasar dentro de un objeto.

Nota: Casi hemos terminado con Typechecking with Props . Debe preguntarse cómo asegurarse de que se proporcione un accesorio o validar nuestro accesorio con una función definida por el usuario. Aprenderemos sobre esto en detalle en el próximo artículo ReactJS Typechecking With Props – Set 3 .