Creando PropTypes dentro del componente
Una segunda forma de crear nuestras PropTypes es agregarlas dentro de nuestro componente, pero te adelanto que esto solo sirve para componentes de clase, por tal razón, en el apartado anterior te mostré el método que sirve para componentes de clase y funcionales, pero nunca esta demás saber este segundo método.
//Componentes de clase
class Componente extends React.Component{
static propTypes = {
texto: PropTypes.string,
numero: PropTypes.number.isRequired,
correo: function(props, propName, componentName){
if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(props[propName])){
return new Error(
`Prop no cuenta con un formato de correo ${propName}, para ${componentName}. Error en la validación.`
)
}
}
}
static defaultProps ={
texto:"EWebik default",
numero:10,
correo:"contacto@ewebik.com"
}
render(){
return(
<>
<p>{this.props.texto}</p>
<p>{this.props.numero}</p>
<p>{this.props.correo}</p>
</>
)
}
}
Como puedes observar la sintaxis es prácticamente la misma solo debemos intercambiar la notación de punto por la palabra reservada static.
Compendio de validadores de las PropTypes
Bien, no solo puedes validar string o números, existe una gran variedad de validadores disponibles por la librería de React, los cuales te dejo a continuación, no obstante, también te dejo el link de la documentación oficial para que la revises si lo necesitas.
import PropTypes from 'prop-types';
MyComponent.propTypes = {
// Puedes declarar que una propiedad es un tipo específico de JS. Por defecto, estas
// son todas opcionales.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// Cualquier cosa que sea interpretada: números, cadenas, elementos o un array
// (o fragment) que contengan estos tipos.
optionalNode: PropTypes.node,
// Un elemento de React
optionalElement: PropTypes.element,
// Un tipo de elemento React (ej. MyComponent).
optionalElementType: PropTypes.elementType,
// Además puedes declarar que una prop es una instancia de una clase. Este usa
// el operador instanceof de JS.
optionalMessage: PropTypes.instanceOf(Message),
// Puedes asegurar que una prop esta limitada a valores específicos si se
// considera como enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// Un objeto que puede ser de diferentes tipos
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// Un array de determinado tipo
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// Un objeto con valores de propiedad de determinado tipo
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// Un objeto que tenga determinada estructura
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// Un objeto con advertencias sobre propiedades adicionales
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),
// Puedes encadenar cualquiera de los anteriores con `isRequired` para asegurar
// que se muestre una advertencia si la prop no se suministra.
requiredFunc: PropTypes.func.isRequired,
// Un valor de cualquier tipo
requiredAny: PropTypes.any.isRequired,
// También puedes suministrar un validador personalizado. Debe retornar un objeto Error
// si la validación falla. No uses `console.warn` o throw, porque no va a funcionar en
// `oneOfType`
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// También puedes suministrar un validador personalizado a `arrayOf` y `objectOf`.
// Debe retornar un objeto Error si la validación falla. El validador se llamará
// por cada key en el array o el objeto. Los primeros dos arguments del validador
// son el array o el objeto, y la key del elemento actual.
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
Excelente, espero que te haya gustado mucho esta clase y hayas aprendido algo nuevo, no olvides visitar las otras clases de este curso y me ayudes compartiendo y con tu suscripción a mi canal.
