// 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
}),
2条答案
按热度按时间fykwrbwg1#
基本上
exact
会给你一个给予警告,如果你的 prop 对象包含额外的属性,而不是通过PropTypes.exact({ })
声明它。参考:https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
hgb9j2n62#
PropTypes.shape
只是确保提供的任何属性都与指定的类型匹配。在上面的例子中,只有当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
时name={5} age="Nineteen"
将抛出警告。name="Sachin" age={50}
不会抛出警告。name="Sachin"
不会抛出警告。age={50}
不会抛出警告。<ComponentName />
不会抛出警告。name="Sachin" age={50} centuries={100}
将抛出警告。