React propTypes : objectOf vs shape ?

Question

Quelle est la différence entre PropTypes.objectOf y PropTypes.shape ? Dans le PropTypes :

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

Quand dois-je utiliser objectOf et quand dois-je utiliser shape ?

Answer 1

PropTypes.objectOf est utilisé pour décrire un objet dont les propriétés sont toutes du même type.

    const objectOfProp = {
        latitude: 37.331706,
        longitude: -122.030783
    }
    // PropTypes.objectOf(PropTypes.number)

PropTypes.shape est utilisé pour décrire un objet dont les clés sont connues à l'avance et qui peut représenter différents types.

    const shapeProp = {
        name: 'Jane',
        age: 25
    }
    // PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })

Answer 2

Je voulais juste donner un exemple avec l'objet suivant :

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

ObjectOf et Shape

Utilisé lorsqu'un objet peut avoir différents noms de propriétés, mais un ensemble cohérent de propriétés pour chacun d'eux :

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

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

Comme vous pouvez le voir, animals est un objet composé de plusieurs propriétés qui se conforment chacune à la norme animalItemShape type.

J'espère que cela vous aidera !