反应propTypes：objectOf与形状？

76

PropTypes.objectOf和之间有什么区别PropTypes.shape？在文档中：

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

— 毁灭者马克
source

135

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

— djfdev
source

1

嗯...好吧，我明白了。我认为我的困惑在于缺乏想象力。您能举一个很好的现实用例的例子PropTypes.objectOf吗？

— DMac毁灭者

用例将是一个您不知道键名的对象。只要您知道值将是什么类型，就可以使用它PropTypes.objectOf进行验证。

— djfdev

1

好吧，objectOf是针对所有值具有相同类型的字典对象。

— Tr1et

48

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

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

对象的形状

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

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

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

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

希望能帮助到你！

— 李维·富勒
source

我使用了PropTypes.objectOf(PropTypes.shape({...}))它，但它不起作用-收到一个错误警告，说我在传递字符串时说“正在传递对象但期望字符串”。的文档说，objectOf对于像“一个具有一定类型的属性值对象” PropTypes.number。我认为您只需要PropTypes.shape({...})没有objectOf对我有用的。

— Albert Vila Calvo

@AlbertVilaCalvo如果我不得不猜测，我想您可能不小心将对象作为设置为该PropTypes.string类型的属性之一传递了。你的物体是什么样的？

— Levi Fuller

2

我刚刚再试一次：使用PropTypes.objectOf(PropTypes.shape({...}))会产生错误的“ Invalid prop ...”红色错误，而PropTypes.shape({...})可以正常使用（没有错误显示）。再次，文档说objectOf应该像PropTypes.objectOf(PropTypes.number)和用于“具有某种类型的属性值的对象”一样使用。在我看来，该包装PropTypes.shape({...})具有objectOf不需要-只需使用PropTypes.shape({...})直接。

— Albert Vila Calvo