reactjs - props - types of proptypes react

Reaccionar propTypes: objectOf vs shape?

Question

¿Cuál es la diferencia entre PropTypes.objectOf y PropTypes.shape ? En los docs :

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

¿Cuándo debo usar objectOf y cuándo debo usar shape ?

Answer 1

Solo quería proporcionar un ejemplo dado el siguiente objeto:

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

Objeto y forma

Se usa cuando un objeto puede tener diferentes nombres de propiedades, pero un conjunto consistente de propiedades para cada uno:

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

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

Como puede ver, animals es un objeto compuesto de múltiples propiedades que se ajustan al tipo animalItemShape .

¡Espero eso ayude!

Answer 2

PropTypes.objectOf se usa al describir un objeto cuyas propiedades son todas del mismo tipo.

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

// PropTypes.objectOf(PropTypes.number)

PropTypes.shape se usa al describir un objeto cuyas claves se conocen de antemano y pueden representar diferentes tipos.

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

// PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })