¿Cómo React maneja o restringe Props a ciertos tipos, o requiere que existan ciertos Props?

React nos permite pasar datos del componente principal a los componentes secundarios con la ayuda de accesorios . Si queremos comprobar el tipo de accesorios podemos hacerlo con la ayuda de PropTypes . Proptypes nos ayuda a realizar comprobaciones de tipos en tiempo de ejecución en los accesorios y, si la comprobación falla, recibimos una advertencia en la consola del navegador. 

Sintaxis:

import PropTypes from 'prop-types';
ComponentName.propTypes = {
  // type checks
};

Si queremos restringir un accesorio al tipo de string, podemos hacerlo usando la sintaxis que se menciona a continuación.

import PropTypes from 'prop-types';
ComponentName.propTypes = {
  name: PropTypes.string
};

Si queremos hacer un accesorio con cualquier tipo de datos, podemos hacerlo usando la sintaxis que se menciona a continuación.

import PropTypes from 'prop-types';
ComponentName.propTypes = {
  name: PropTypes.any.isRequired
};

Configuración del proyecto:

Paso 1: Cree un nuevo proyecto de reacción usando el siguiente comando en la línea de comando.

npx create-react-app name_of_the_project

Paso 2: Cree un nuevo archivo llamado Info.js dentro del directorio src de este proyecto.

Estructura del proyecto: después de seguir los pasos, debería verse la estructura del proyecto.

En el archivo app.js, el componente de la aplicación consta solo de información como componente secundario. Pasamos dos accesorios al componente de información que nombra cuál es un tipo de número y un nombre de usuario que es de tipo string.

import Info from './Info';
  
const App = () => {
  return <Info name={1} username={'gfg@123'} />;
};
  
export default App;

En el archivo Info.js, creamos el componente funcional Info que recibe props. Al usar los tipos de Prop, aplicamos comprobaciones de tipo, es decir, el prop de nombre solo puede ser de tipo string y el prop de nombre de usuario solo puede ser de tipo string y también es obligatorio, es decir, es obligatorio pasar prop de nombre de usuario al componente de información; en la consola del navegador. 

import PropTypes from 'prop-types';
  
const Info = (props) => {
  return (
    <div>
      <div>Name: {props.name}</div>
      <div>Username: {props.username}</div>
    </div>
  );
};
  
Info.propTypes = {
  name: PropTypes.string,
  username: PropTypes.string.isRequired,
};
  
export default Info;

Paso para ejecutar la aplicación: Para iniciar su aplicación, use el siguiente comando en la línea de comando.

npm start

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

Explicación: dentro del archivo Info.js, restringimos el nombre prop al tipo de string con la ayuda de PropTypes pero desde el componente de la aplicación, pasamos un tipo de número (es decir, 1) como valor al nombre prop. Es por eso que recibimos una advertencia en la consola del navegador que dice que se esperaba que el valor del nombre fuera de tipo string, pero se recibió un número.