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

En el artículo anterior ReactJS Typechecking With PropTypes – Set 2 , discutimos la validación de instancias, la validación de tipos de datos únicos y múltiples, la validación de tipos y formas, y la validación exacta en accesorios. En este artículo, hablaremos sobre la validación de pasar cualquier cosa , la validación requerida y la validación personalizada de accesorios.

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: pasar cualquier tipo de datos dentro de accesorios 

Podemos validar prop de cualquier tipo de datos, ya sea un número, string, símbolo, array, objeto, etc. utilizando este método. Significa que podemos pasar cualquier tipo de datos válido como accesorios dentro de un componente.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
  
// Component
class ProfitComponent extends Component {
  render() {
   return (
      <div>
        {/* Printing the props */}
         <h1>
          {this.props.goodsNo}
         </h1>
         <h1>
          {this.props.goodsInfo}
         </h1>
      </div>
      )
  }
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goodsNo: 67,
   goodsInfo: "GeeksForGeeks"
}
  
// Validating prop types
ProfitComponent.propTypes = {
   goodsNo: PropTypes.any,
   goodsInfo: PropTypes.any
}
  
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 llamada GoodsNo como un número y GoodInfo como una string en un componente de clase y validando ambos como cualquier tipo de datos. Todo se representa perfectamente en el navegador y no aparece ningún mensaje de advertencia. Esto nos dice claramente que se puede pasar cualquier valor dentro de accesorios llamados no_bienes y info_bienes , ya sea una string, un número, una array o un objeto, etc.

Ejemplo 2: Validación requerida para datos pasados ​​dentro de props

Podemos validar que se proporcione o no un accesorio. Para hacer eso, usamos isRequired para asegurarnos de que se muestre un mensaje de advertencia si no se proporciona la propiedad o si su tipo de datos es diferente al especificado.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
  
// Component
class ProfitComponent extends Component {
  render() {
   return (
      <div>
        {/* Printing the props */}
         <h1>
          {this.props.goodsNo}
         </h1>
      </div>
      )
  }
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goodsNo: "GeeksForGeeks"
}
  
// Validating prop types
ProfitComponent.propTypes = {
   goodsNo: PropTypes.number.isRequired
}
  
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 llamada goodNo como una string y la requerimos estrictamente como un número en nuestras propiedades. Aún así, todo se representa perfectamente en el navegador, pero aparece un mensaje de advertencia en la consola. Esto nos dice claramente que nuestra propiedad denominada GoodsNo requería estrictamente un valor de número, pero se pasa como una string. Entonces, concluimos que el método isRequired es solo otra forma de validar los datos pasados ​​dentro de un accesorio.

Ejemplo 3: hacer nuestra propia función de validación de accesorios o validación personalizada

También podemos especificar nuestra propia validación personalizada o una función de validación de accesorios para verificar qué datos se deben pasar como accesorios dentro de nuestro componente. Devuelve un objeto de error como mensaje de advertencia si falla la validación.

import React, { Component } from 'react'
  
// Component
class ProfitComponent extends Component {
  render() {
   return (
      <div>
        {/* Printing the props */}
         <h1>
          {this.props.goodsNo}
         </h1>
      </div>
      )
  }
}
  
// 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;

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 GoodsNo como un número con el valor de 20 y validando si su valor es mayor que 100 o no en nuestra propia función de validación. También se denomina función de validación personalizada cuyo nombre debe ser el mismo que nuestro propName ( goodNo en este caso). Proporcionamos los siguientes parámetros en nuestra función goodNo() :

• props: Se refiere a todos los props que estamos pasando dentro del componente.
• propName: Hace referencia al prop para el que estamos creando esta función de validación, que en este caso es goodsNo .
• componente: Se refiere al componente en el que estamos pasando nuestros props, que en este caso es nuestro componente de clase ProfitComponent .

Accedemos a nuestro propName goodsNo escribiendo props[propName] en la función y validamos si su valor es mayor a 100 o no. Como nuestro valor de accesorios es 20, recibimos un mensaje de error proporcionado por nosotros en la consola de nuestro navegador. Claramente nos dice que el valor de nuestro accesorio llamado GoodsNo es menor que 100. De esta manera, podemos validar los datos pasados ​​a un accesorio con una función de validación definida por el usuario.