Saltar al contenido

Reaccionar PropTypes tutorial para la beginnersNov, 22ndIn este tutorial, vamos a aprender y cómo utilizar proptypes …

marzo 13, 2020

 

En este tutorial, vamos a aprender y cómo utilizar proptypes de reaccionar con la ayuda de ejemplos.

PropTypes

  • PropTypes nos ayuda a comprobar, si los apoyos componente está recibiendo datos de tipo correctos o no. PropTypes uso

en el reaccionan, en primer lugar, tenemos que instalar el paquete hélices tipos de la NGP.

npm i -D prop-types

Ejemplo:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
function App(props) {
return (

{props.name}

);
}

App.propTypes = { name: PropTypes.string};
ReactDOM.render(,document.getElementById("root"));

En este ejemplo, hemos usado validador PropTypes.string a nombre prop y pasado el número de valor dentro de render método, de modo que podemos ver un error en la consola.

¿Usted ha visto, claramente está mostrando espera que el error de tipo cadena y es recibido es número.

Disponible Tipo validadores

Estos son paquete de validadores de tipos disponibles PropTypes nos da.

optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string
optionalSymbol: PropTypes.symbol,

requieren valores

Si atribuimos la propiedad isRequired a cualquier PropTypes podemos obtener un error si no somos capaces de pasar los apoyos a ese componente.

Ejemplo:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

function App(props) {
return (

{props.name}

);
}

App.propTypes = {
name: PropTypes.string.isRequired};

ReactDOM.render(,document.getElementById("root"));

En este ejemplo, no logran pasar el nombre prop a tan componente que podemos ver un error en la consola.

valores por defecto prop

Mediante el uso de la propiedad defaultProps, podemos definir los valores por omisión de prop acomponent.

Ejemplo:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

function App(props) {
return (

{props.name}

);
}

App.defaultProps = {
name: "UnKnown"};

ReactDOM.render(,document.getElementById("root"));

Ahora, si no somos capaces de pasar un valor prop por defecto lo desconocido.

Validando Objetos

Ejemplo:

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

function App(props) {
return (

{props.user.name}

{props.user.age}

);
}

App.propTypes = {
user: PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })};

const user = { name: "Sai", age: 3 };ReactDOM.render(, document.getElementById("root"));

En este ejemplo, estamos especificando la forma de un objeto prop usuario.

Validando matriz de objetos

Ejemplo:

App.propTypes = {
usersArray: PropTypes.arrayOf( PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
})).isRequired
};

Exigir props.children propiedad

Con PropTypes.element, podemos especificar que el componente sólo puede recibir un solo niño.

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
render() {
return (

{this.props.children}

);
}
}

App.propTypes = {
children: PropTypes.element.isRequired};