reactjs - props - react proptypes install
¿Cómo se validan los PropTypes de un objeto anidado en ReactJS? (3)
Estoy usando un objeto de datos como mi accesorio para un componente en ReactJS.
<Field data={data} />
Sé que es fácil validar el objeto PropTypes en sí mismo:
propTypes: {
data: React.PropTypes.object
}
¿Pero qué pasa si quiero validar los valores dentro? es decir. data.id, data.title?
props[propName]: React.PropTypes.number.required // etc...
Puede usar
React.PropTypes.shape
para validar propiedades:
propTypes: {
data: React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
title: React.PropTypes.string
})
}
Actualizar
Como @Chris señaló en los comentarios, a partir de la versión React 15.5.0
React.PropTypes
ha movido a paquetes
prop-types
.
import PropTypes from ''prop-types'';
propTypes: {
data: PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string
})
}
Si
React.PropTypes.shape
no le da el nivel de verificación de tipo que desea, eche un vistazo a
tcomb-react
.
Proporciona una función
toPropTypes()
que le permite validar un esquema definido con la biblioteca
tcomb
haciendo uso del soporte de React para definir
validadores de
propTypes
personalizados
, ejecutando validaciones usando la validación
tcomb-validation
.
Ejemplo básico de sus documentos :
// define the component props
var MyProps = struct({
foo: Num,
bar: subtype(Str, function (s) { return s.length <= 3; }, ''Bar'')
});
// a simple component
var MyComponent = React.createClass({
propTypes: toPropTypes(MyProps), // <--- !
render: function () {
return (
<div>
<div>Foo is: {this.props.foo}</div>
<div>Bar is: {this.props.bar}</div>
</div>
);
}
});
user: React.PropTypes.shap({
age: (props, propName) => {
if (!props[propName] > 0 && props[propName] > 100) {
return new Error(`${propName} must be betwen 1 and 99`)
}
return null
},
})