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

React nos permite pasar argumentos a un Componente usando algo llamado props (significa propiedades) que se pasan a los componentes a través de atributos HTML de la misma manera que los argumentos pasados ​​en una función. Estos brindan una forma de pasar datos de un componente a otros componentes y generar datos dinámicos en nuestro método de procesamiento. Podemos pasar diferentes tipos de datos como números enteros, símbolos, strings, arrays, objetos, etc. como accesorios a los componentes. Podemos crear props predeterminados o pasar props directamente como atributos HTML a los componentes o desde fuera de un componente y usarlos dentro de ese componente. Debe preguntarse si podemos verificar qué tipo de valores estamos pasando dentro de nuestro Componente a través de accesorios. Sí, podemos usar PropTypespara validar cualquier dato que estemos recibiendo de props. Esto se llama verificación de tipos con tipos de propiedades .

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

La comprobación de tipos de los accesorios siempre se realiza durante la representación de un componente porque JavaScript es un lenguaje de tipos y los tipos de datos siempre se determinan en tiempo de ejecución.

var g = 20
// Changing the data type
g = "geeks"
g = [100,200]

Por ejemplo, aquí g se declaró inicialmente como un número entero. Luego, su tipo cambia a una string y luego a una array. Entonces, en Javascript, un tipo de datos puede ser lo que queramos que sea. Como React también está escrito en Javascript, no hay forma de verificar el tipo de accesorios antes de renderizar (o ejecutar). Es por eso que React nos proporcionó propTypes para ayudarnos a validar los datos que se reciben de los accesorios. La verificación de tipos nos avisará con un mensaje de consola si pasamos un tipo diferente al tipo de datos especificado por propTypes .

Veamos cómo podemos usar propTypes para la validación tanto en componentes de clase como en componentes funcionales uno por uno:

Ejemplo 1: puede ver en el siguiente programa que estamos pasando la propiedad denominada GoodsPrice como una string en un componente de clase y validándola como 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 la propiedad denominada goodPrice tuviera un valor numérico, pero en su lugar se pasó un valor de string.

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
  
// Component
class ClassComponent extends React.Component{
    render(){
        return(
          <div>
           {/* printing all props */}
           <h1>
           {this.props.goodsPrice}
           </h1>
          </div> 
       );
   }
}
   
// Validating prop types
ClassComponent.propTypes = {
  goodsPrice: PropTypes.number
}
   
// Creating default props
ClassComponent.defaultProps = {
  goodsPrice: "GeeksForGeeks"
}
   
ReactDOM.render(
    <ClassComponent  />, 
    document.getElementById("root")
);

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:

Ejemplo 2: puede ver en el siguiente programa que estamos pasando la propiedad llamada goodInfo como un número en un componente funcional pero validándola como una string, 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 llamada GoodInfo tuviera un valor de string, pero en su lugar se pasó un valor numérico.

import React from 'react'
import PropTypes from 'prop-types'
  
// Function
function ProfitComponent(props) {
  return (
      <div>
        {/* Printing the props */}
         <h1>
          {props.goodsInfo}
         </h1>  
      </div>
  )
}
  
// Creating default props
ProfitComponent.defaultProps = {
   goodsInfo: 10
}
  
// Validating prop types
ProfitComponent.propTypes = {
   goodsInfo: PropTypes.string
}
  
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:

Aquí hay una lista de todos los tipos de datos válidos que un accesorio puede tomar en React:

• PropTypes.array: Valida que el accesorio sea un Array.
• PropTypes.bool: Valida que el prop sea un bool.
• PropTypes.func: Valida que el prop sea una función.
• PropTypes.number: Valida que el accesorio sea un número.
• PropTypes.object : valida que un accesorio sea un objeto.
• PropTypes.string : valida que el accesorio sea una string.
• PropTypes.symbol : Valida que la propiedad sea un símbolo.

Nota: No solo los tipos de datos, también podemos validar elementos React, valores específicos dentro de un tipo de datos o datos que estamos almacenando dentro de otro tipo de datos (como una array o un objeto). Aprenderemos sobre esto en detalle en el próximo artículo ReactJS Typechecking With Props – Set 2 .