web-dev-qa-db-ja.com

React propTypes：objectOf vs shape？

PropTypes.objectOfとPropTypes.shapeの違いは何ですか？ docs ：

// 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を使用する必要がありますか？

reactjsreact-proptypes
53
DMac the Destroyer

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

次のオブジェクトが与えられた例を提供したかっただけです。

{
    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タイプに準拠する複数のプロパティで構成されるオブジェクトです。

それが役に立てば幸い！

32
Levi Fuller