W jaki sposób można sprawdzić poprawność typów PropTes zagnieżdżonego obiektu w ReactJS?

Question

Używam obiektu danych jako moich rekwizytów dla komponentu w ReactJS.

<Field data={data} /> 

Wiem, że łatwo do sprawdzania poprawności PropTypes sprzeciwić się:

propTypes: { 
    data: React.PropTypes.object 
} 

Ale co, jeśli chcę, aby sprawdzić poprawność wartości w środku? to znaczy. data.id, data.title?

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

Answer 1

Można użyć React.PropTypes.shape do sprawdzania właściwości:

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

Aktualizuj

Jak @Chris zauważył w komentarzach, jak z React wersja 15.5.0 React.PropTypes została przeniesiona do pakietu prop-types .

import PropTypes from 'prop-types';  

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

More info

Answer 2

Jeśli React.PropTypes.shape nie daje poziom typu sprawdzanie chcesz, rzucić okiem na tcomb-react.

Zapewnia toPropTypes() funkcję, która pozwala sprawdzić poprawność schematu zdefiniowanego z biblioteką tcomb poprzez wykorzystanie wsparcia React dla definiowania custom propTypes validators, bieganie walidacji za pomocą tcomb-validation.

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