React propTypes：objectOf vs 形状？

Question

PropTypes.objectOf 和 PropTypes.shape 有什么区别？在 PropTypes:

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

对

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

什么时候应该使用objectOf，什么时候应该使用shape？

Answer 1

PropTypes.objectOf用于描述一个属性都是同一类型的对象。

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

PropTypes.shape用于描述一个key是提前知道的对象，可以代表不同的类型。

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

Answer 2

只是想提供一个给定以下对象的示例：

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

ObjectOf 和 Shape

当一个对象可以有不同的属性名称，但每个名称都有一组一致的属性时使用：

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

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

如您所见，animals是由多个属性组成的对象，每个属性都符合animalItemShape类型。

希望对您有所帮助！

React propTypes：objectOf vs 形状？

React propTypes: objectOf vs shape?

reactjs

react-proptypes