Reactjs React propTypes:objectOf vs shape？

PropTypes.objectOf

和

PropTypes.shape

之间有什么区别？在：

vs

---

什么时候应该使用

objectOf

以及什么时候应该使用

shape

？

PropTypes。objectOf

用于描述属性都是相同类型的对象

const objectOfProp={
纬度：37.331706，
经度：-122.030783
}
//PropTypes.objectOf（PropTypes.number）

PropTypes.shape

用于描述其关键帧提前已知的对象，可以表示不同的类型

const shapeProp={
姓名：'简'，
年龄:25
}
//PropTypes.shape（{name:PropTypes.string，age:PropTypes.number}）

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

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

如您所见，

动物

是一个由多个属性组成的对象，每个属性都符合

动物形状

类型

---

希望有帮助

嗯。。。好的，我明白了。我想我的困惑是缺乏想象力。你能给出一个关于

PropTypes.objectOf

的好的实际用例的例子吗？用例是一个你事先不知道键名的对象。只要您知道值的类型，就可以使用

PropTypes.objectOf

进行验证。好的，

objectOf

用于所有值都具有相同类型的字典对象。我使用了

PropTypes.objectOf（PropTypes.shape（{…}））

，但它不起作用-收到一个错误的警告，说我是当我传递字符串时，“传递对象但需要字符串”。假设

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的shape时，我得到的是字符串而不是object

字段：”{↵  键入：“文本”，↵  hintText:“”，↵  必填项：false，}“

不知道哪里做错了

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