Zugriff auf alle Requisiten in verschachtelten propTypes in einer React-Komponente

Question

Ich versuche, bedingt LightboxImage erforderlich oder nicht basierend auf der Eigenschaft von disableLightbox. Allerdings, wenn ich Requisiten von lightboxImage lese ich nur die erste Ebene der Eigenschaften (src, width, height, aspectRatio) und nicht die Ebene nach oben (Fotos, disableLightbox). Kann ich alle Eigenschaften lesen?

Gallery.propTypes = { 
 
    photos: React.PropTypes.arrayOf(
 
     React.PropTypes.shape({ 
 
      src: React.PropTypes.string.isRequired, 
 
      width: React.PropTypes.number.isRequired, 
 
      height: React.PropTypes.number.isRequired, 
 
      aspectRatio: React.PropTypes.number.isRequired, 
 
      lightboxImage: props => console.log(props) 
 
     }) 
 
    ).isRequired, 
 
    disableLightbox: React.PropTypes.bool 
 
}; 

Answer 1

@MatthewHerbst erklärt die Schlüsselidee, einen benutzerdefinierten Validator, aber hier ist eine neu geschriebene Version des Beispielcode, vollständiger und anwendbar ist und noch einfacher (FYI, obwohl nicht getestet):

photos: function (props, propName, componentName) { 
    // I don't know what `lightboxImage` is, I'll assume string. 
    var lightboxImageValidator = React.PropTypes.string; 
    if (!props.disableLightbox) { 
    lightboxImageValidator = lightboxImageValidator.isRequired; 
    } 

    return React.PropTypes.arrayOf(
    React.PropTypes.shape({ 
     src: React.PropTypes.string.isRequired, 
     width: React.PropTypes.number.isRequired, 
     height: React.PropTypes.number.isRequired, 
     aspectRatio: React.PropTypes.number.isRequired, 
     lightboxImage: lightboxImageValidator, 
    }) 
).isRequired.apply(this, arguments); 
} 

Answer 2

Während bei dem Standard PropType Validatoren nicht möglich, Sie konnten dies tun a custom validator entweder für disableLightbox oder photos durch das Schreiben. Lassen Sie uns tun es disableLightbox verwenden, da das ist, was Sie fragen:

disableLightbox: function(props, propName, componentName) { 
    // First, we need to check that we're a Boolean 
    // You could do this with PropTypes.boolean but it's much simpler to do it yourself 
    let type = typeof props[propName]; 
    if (type !== 'boolean') { 
    return new Error(propName + ' supplied to ' + componentName + ' is of type `' + type +'`. `boolean` expected. Validation failed.'); 
    } 

    if (props[propName]) { 
    if (props.hasOwnProperty('photos') { 
     // Now we do the fun part. Here we are manually checking the validation of photos 
     // using the built-in PropTypes, but this time with lightboxImage required 
     let typeChecker = PropTypes.arrayOf(PropTypes.shape({ 
     lightboxImage.string.isRequired 
     })); 

     return typeChecker(props, 'photos', componentName, 'prop'); 
    } else { 
     // Missing the photos prop 
     return new Error(propName + ' supplied to ' + componentName + ' has a true value, but prop `photos` is missing. Validation failed.'); 
    } 
    } else { 
    // disableLightbox is false, so no need to check lightboxImage 
    } 
} 

ich in der Dokumentation ein gutes Buch über die benutzerdefinierten Validator Beispiele hoch schlagen vor, wobei (Disclaimer: Ich schrieb das customArrayProp Beispiel). Das obige Beispiel könnte als etwas hacky angesehen werden, aber es sollte funktionieren. Sie sollten auch beachten, dass die oben genannten Auswirkungen auf die Leistung haben können, wenn photos groß ist, da die Validierung im Grunde genommen erneut ausgeführt wird.