Wie validieren Sie die PropTypes eines verschachtelten Objekts in ReactJS?

Question

Ich verwende ein Datenobjekt als meine Requisiten für eine Komponente in ReactJS.

<Field data={data} /> 

ich weiß, ist es einfach die PropTypes zu validieren selbst Objekt:

propTypes: { 
    data: React.PropTypes.object 
} 

Aber was, wenn ich will innerhalb der Werte validieren? dh. data.id, data.title?

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

Answer 1

Sie können React.PropTypes.shape verwenden, um Eigenschaften zu überprüfen:

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

aktualisieren

Wie @ Chris in Kommentaren darauf hingewiesen, wie von React Version 15.5.0 React.PropTypes bewegt hat prop-types zu verpacken .

import PropTypes from 'prop-types';  

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

More info

Answer 2

Wenn React.PropTypes.shape Sie das Niveau der Typ nicht geben Prüfung Sie wollen, haben einen Blick auf tcomb-react.

Es bietet eine toPropTypes() Funktion, die Sie mit der tcomb Bibliothek definiert Validierung eines Schemas können durch die Nutzung von Unterstützung durch die Reaktion custom propTypes validators zur Definition, Lauf Validierungen tcomb-validation verwenden.

Basic example from its docs:

// 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> 
    ); 
    }  
}); 

Answer 3

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 
    }, 
})