Comment valider les PropTypes d’un object nested dans ReactJS?

J’utilise un object de données comme accessoire pour un composant de ReactJS.

 

Je sais qu’il est facile de valider l’object PropTypes lui-même:

 propTypes: { data: React.PropTypes.object } 

Mais que faire si je veux valider les valeurs à l’intérieur? c’est à dire. data.id, data.title?

 props[propName]: React.PropTypes.number.required // etc... 

Vous pouvez utiliser React.PropTypes.shape pour valider les propriétés:

 propTypes: { data: React.PropTypes.shape({ id: React.PropTypes.number.isRequired, title: React.PropTypes.ssortingng }) } 

Mettre à jour

Comme le fait remarquer @Chris dans les commentaires, React.PropTypes a été déplacé dans la version 15.5.0 de React pour empaqueter les prop-types .

 import PropTypes from 'prop-types'; propTypes: { data: PropTypes.shape({ id: PropTypes.number.isRequired, title: PropTypes.ssortingng }) } 

Plus d’informations

Si React.PropTypes.shape ne vous donne pas le niveau de vérification de type souhaité, jetez un oeil à tcomb-react .

Il fournit une fonction toPropTypes() qui vous permet de valider un schéma défini avec la bibliothèque tcomb en utilisant le support de React pour définir des validateurs propTypes personnalisés , exécutant des validations à l’aide de tcomb-validation .

Exemple de base de ses documents :

 // 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 ( 
Foo is: {this.props.foo}
Bar is: {this.props.bar}
); } });
 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 }, })