PropTypes reagieren: objectOf vs shape?

76

Was ist der Unterschied zwischen PropTypes.objectOfund PropTypes.shape? In den Dokumenten :

// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number)

vs.

// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

Wann soll ich verwenden objectOfund wann soll ich verwenden shape?

reactjs react-proptypes DMac der Zerstörer
quelle

Antworten:

135

PropTypes.objectOf wird verwendet, wenn ein Objekt beschrieben wird, dessen Eigenschaften alle vom gleichen Typ sind.

const objectOfProp = {
  latitude: 37.331706,
  longitude: -122.030783
}

// PropTypes.objectOf(PropTypes.number)

PropTypes.shape wird verwendet, wenn ein Objekt beschrieben wird, dessen Schlüssel im Voraus bekannt sind und verschiedene Typen darstellen können.

const shapeProp = {
  name: 'Jane',
  age: 25
}

// PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })
djfdev
quelle
1
hmm ... ok das verstehe ich. Ich denke, meine Verwirrung ist mit einem Mangel an Vorstellungskraft. Können Sie ein Beispiel für einen guten realen Anwendungsfall geben PropTypes.objectOf?
DMac der Zerstörer
Ein Anwendungsfall wäre ein Objekt, bei dem Sie die Namen der Schlüssel nicht im Voraus kennen. Solange Sie wissen, welcher Typ die Werte sein werden, können Sie sie PropTypes.objectOfzur Validierung verwenden.
DJFDEV
1
Nun, objectOfist für ein Wörterbuchobjekt mit dem gleichen Typ für alle Werte.
Tr1et
48

Ich wollte nur ein Beispiel für das folgende Objekt geben:

{
    petStore: {
        animals: {
           '23': { name: 'Snuffles', type: 'dog', age 13 }
           '29': { name: 'Mittens', type: 'cat', age: 7 }
        }
    }
}

Objekt und Form

Wird verwendet, wenn ein Objekt unterschiedliche Eigenschaftsnamen haben kann, aber für jeden eine konsistente Reihe von Eigenschaften:

const animalItemShape = {
    name: PropTypes.string,
    type: PropTypes.string,
    age: PropTypes.number
}

const petStoreShape = {
    animals: PropTypes.objectOf(PropTypes.shape(animalItemShape))
}

Wie Sie sehen können, animalsbesteht ein Objekt aus mehreren Eigenschaften, die jeweils dem animalItemShapeTyp entsprechen.

Ich hoffe es hilft!

Levi Fuller
quelle
Ich habe verwendet PropTypes.objectOf(PropTypes.shape({...}))und es hat nicht funktioniert - ich habe eine falsche Warnung erhalten, dass ich "ein Objekt übergeben habe, aber eine Zeichenfolge erwartet habe", als ich eine Zeichenfolge übergeben habe. Die Dokumente sagen, dass objectOffür "Ein Objekt mit Eigenschaftswerten eines bestimmten Typs" wie PropTypes.number. Ich denke du brauchst nur PropTypes.shape({...})ohne das objectOf, was bei mir funktioniert hat.
Albert Vila Calvo
@AlbertVilaCalvo Wenn ich raten müsste, würde ich mir vorstellen, dass Sie versehentlich ein Objekt als eine der Eigenschaften übergeben haben, die Sie für den PropTypes.stringTyp festgelegt haben. Wie sah Ihr Objekt aus?
Levi Fuller
2
Ich habe es gerade noch einmal versucht: Wenn Sie verwenden, PropTypes.objectOf(PropTypes.shape({...}))wird der falsche rote Fehler "Ungültige Requisite ..." PropTypes.shape({...})angezeigt , während er einwandfrei funktioniert (es wird kein Fehler angezeigt). Wieder sagen die Dokumente, dass objectOfdies wie PropTypes.objectOf(PropTypes.number)"Ein Objekt mit Eigenschaftswerten eines bestimmten Typs" verwendet werden sollte. Es scheint mir, dass das Umwickeln PropTypes.shape({...})mit objectOfnicht erforderlich ist - einfach PropTypes.shape({...})direkt verwenden.
Albert Vila Calvo