reactjs PropTypes.exact和PropTypes.shape的区别

w8biq8rn  于 2023-10-17  发布在  React
关注(0)|答案(2)|浏览(119)

有什么区别

PropTypes.exact({
  name: PropTypes.string,
  age: PropTypes.number
})

vs

PropTypes.shape({
  name: PropTypes.string,
  age: PropTypes.number
})

我将很高兴任何帮助

fykwrbwg

fykwrbwg1#

基本上exact会给你一个给予警告,如果你的 prop 对象包含额外的属性,而不是通过PropTypes.exact({ })声明它。

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

  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),

参考:https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

hgb9j2n6

hgb9j2n62#

PropTypes.shape只是确保提供的任何属性都与指定的类型匹配。

PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number
})

在上面的例子中,只有当name不是字符串或者age不是数字时,你才会在console中得到一个警告。另一方面,如果我们没有提供一个或多个属性,或者添加了一个额外的属性,它也不会抛出任何警告。
name={5} age="Nineteen"将抛出警告。
name="Sachin" age={50}不会抛出警告。
name="Sachin"不会抛出警告。
age={50}不会抛出警告。
<ComponentName />不会抛出警告。
name="Sachin" age={50} centuries={100}不会抛出警告。
它只是确保没有不匹配的proptype。它不担心丢失属性或提供额外的属性。
PropTypes.exact类似于PropTypes.shape,唯一的区别是当添加额外的属性时会抛出警告。除此之外,它的行为就像PropTypes.shape
使用PropTypes.exact

PropTypes.exact({
    name: PropTypes.string,
    age: PropTypes.number
})

name={5} age="Nineteen"将抛出警告。
name="Sachin" age={50}不会抛出警告。
name="Sachin"不会抛出警告。
age={50}不会抛出警告。
<ComponentName />不会抛出警告。
name="Sachin" age={50} centuries={100}将抛出警告

相关问题