ReactJS | Tipos de propiedad

En nuestros artículos anteriores sobre Props, habíamos visto cómo pasar información a cualquier Componente usando props. Habíamos pasado diferentes tipos de información como números enteros, strings, arrays, etc. como apoyo a los componentes. Entonces, recordemos el proceso de cómo pasamos estos accesorios a un componente. Podemos crear props predeterminados o pasar props directamente como atributos a los componentes. Estábamos pasando accesorios desde fuera de un componente y usándolos dentro de ese componente. Pero, ¿hemos comprobado qué tipo de valores obtenemos dentro de nuestro Componente a través de accesorios? No nosotros no. Pero entonces también todo funcionó bien. 
Depende totalmente de nosotros si validamos los datos que estamos obteniendo utilizando accesorios dentro de un Componente o no. Pero para aplicaciones más grandes, siempre es una buena práctica validar los datos que obtenemos a través de accesorios. Esto ayudará en la depuración y también ayuda a evitar errores en el futuro. Veamos cómo hacer esto.
 

propTypes en React

Antes del lanzamiento de React 15.5.0, la versión propTypes está disponible en el paquete de reacción, pero en versiones posteriores de React debe agregar una dependencia en su proyecto. Puede agregar la dependencia en su proyecto usando el comando que se indica a continuación:

npm install prop-types --save

Podemos usar propType para validar cualquier dato que recibamos de props. Pero antes de usarlo tendremos que importarlo. Agregue la siguiente línea en la parte superior de su archivo index.js: 
 

import PropTypes from 'prop-types';

Una vez que hayamos importado propTypes, estamos listos para trabajar con ellos. Al igual que defaultProps, propTypes también son objetos donde las claves son los nombres de los accesorios y los valores son sus tipos. La siguiente sintaxis muestra cómo usar propTypes: 
 

ComponentClassName.propTypes{
    
    propName1 : PropTypes.string,
    propName2 : PropTypes.bool,
    propName3 : PropTypes.array,
    .
    .
    .
    .
    propNamen : PropTypes.anyOtherType
}

En la sintaxis anterior, ComponentClassName es el nombre de la clase de componente, anyOtherType puede ser cualquier tipo que podamos pasar como accesorios. Para los accesorios que no validan el tipo de datos especificado por propTypes, aparecerá una advertencia en la consola. Veamos un programa completo que utiliza propTypes para la validación para una mejor comprensión: 
 

import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
 
// Component
class ComponentExample extends React.Component{
    render(){
        return(
                <div>
                 
                    {/* printing all props */}
                    <h1>
                        {this.props.arrayProp}
                        <br />
 
                        {this.props.stringProp}
                        <br />
 
                        {this.props.numberProp}
                        <br />
 
                        {this.props.boolProp}
                        <br />
                    </h1>
                </div>
            );
    }
}
 
// Validating prop types
ComponentExample.propTypes = {
    arrayProp: PropTypes.array,
    stringProp: PropTypes.string,
    numberProp: PropTypes.number,
    boolProp: PropTypes.bool,
}
 
// Creating default props
ComponentExample.defaultProps = {
 
    arrayProp: ['Ram', 'Shyam', 'Raghav'],
    stringProp: "GeeksforGeeks",
    numberProp: "10",
    boolProp: true,
}
 
ReactDOM.render(
    <ComponentExample  />,
    document.getElementById("root")
);

Producción: 
 

Puede ver en el programa anterior que estamos pasando el accesorio llamado numberProp como una string pero validándolo como un número. Aún así, 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 numberProp contuviera un valor numérico, pero en su lugar se pasó un valor de string. Puede ir al documento oficial de ReactJS para ver todos los tipos válidos que puede tomar una propiedad.
Nota : en versiones recientes de React , React.PropTypes se ha movido a un paquete diferente, y tendremos que instalar ese paquete por separado para poder usarlo. Vaya al enlace https://www.npmjs.com/package/prop-types para obtener instrucciones de instalación.