反应 propTypes：objectOf 与形状？答案

【问题标题】：React propTypes: objectOf vs shape?反应 propTypes：objectOf 与形状？
【发布时间】：2017-08-18 20:40:28
【问题描述】：

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？

【问题讨论】：

标签： reactjs react-proptypes

【解决方案1】：

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

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

PropTypes.shape 用于描述一个对象，其键是提前知道的，并且可能代表不同的类型。

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

【讨论】：

嗯...好吧，我明白了。我认为我的困惑是缺乏想象力。您能否举一个PropTypes.objectOf 的真实用例示例？
一个用例是一个你事先不知道键名的对象。只要知道值是什么类型，就可以使用PropTypes.objectOf进行验证。
好吧，objectOf 用于所有值的类型相同的字典对象。

【解决方案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 类型。

希望对你有帮助！

【讨论】：

我使用了PropTypes.objectOf(PropTypes.shape({...}))，但它不起作用 - 在传递字符串时收到错误警告，提示我“传递了一个对象但预期的字符串”。 docs 表示 objectOf 用于“具有特定类型属性值的对象”，例如 PropTypes.number。我认为您只需要 PropTypes.shape({...}) 而不需要 objectOf，这对我有用。
@AlbertVilaCalvo 如果我不得不猜测，我想您可能不小心将一个对象作为您设置为PropTypes.string 类型的属性之一传递了。你的对象是什么样的？
我刚刚又试了一次：使用PropTypes.objectOf(PropTypes.shape({...})) 会出现错误的“Invalid prop...”红色错误，而PropTypes.shape({...}) 工作正常（没有显示错误）。同样，文档说objectOf 应该像PropTypes.objectOf(PropTypes.number) 一样使用，并且用于“具有某种类型的属性值的对象”。在我看来，不需要用objectOf 包装PropTypes.shape({...}) - 只需直接使用PropTypes.shape({...})。
我面临一个问题，当我使用带或不带 objectOf 的形状时，我得到的是字符串而不是对象 field: "{↵ type: 'text',↵ hintText: '',↵ required: false,}" 不知道做错了什么