edd*_*ddy 5 reactjs react-proptypes
我需要在reducers中验证类似字典的对象,但由于我已经在使用Babel,所以我不想求助于像Typescript这样的工具.
以此对象为例:
posts : {
byId : {
"post1" : {
id : "post1",
author : "user1",
body : "......",
comments : ["comment1", "comment2"]
},
"post2" : {
id : "post2",
author : "user2",
body : "......",
comments : ["comment3", "comment4", "comment5"]
}
}
allIds : ["post1", "post2"]
}
Run Code Online (Sandbox Code Playgroud)
我如何使用PropTypes 表达我对byId对象的期望?可能吗?如果是这样,怎么样?
你可以编写自定义proptype检查器,如果你不能达到你想要的PropTypes'内置proptypes.
如果你想的全值byId要与属性的对象id,author,body和comments,你可以使用shape,objectOf和arrayOf.如果要allIds包含所有键,byId可以编写自定义验证器:
posts: PropTypes.shape({
byId: PropTypes.objectOf(PropTypes.shape({
id: PropTypes.string,
author: PropTypes.string,
body: PropTypes.string,
comments: PropTypes.arrayOf(PropTypes.string)
})),
allIds(props, propName, componentName) {
if(!Object.keys(props.byId).every(postID => props[propName].includes(postID))) {
return new Error('allIds must include all the ids provided to byId!');
}
}
})
Run Code Online (Sandbox Code Playgroud)
以上使用形状,因此它需要一个posts带有键byId和的对象allIds.它预期byId要与属性的对象的值也可以是形状的对象,具有id,author和body是的字符串,comments是一个字符串数组.最后,它使用自定义proptype验证器来检查byId(帖子ID)中是否存在每个键allIds.如果没有,则抛出错误.请注意,这不会涵盖allIds具有不存在的帖子ID 的情况byIds.请参阅如何知道两个阵列是否具有相同的值以获得更多解决方案.您可以isRequired在必要时添加.
| 归档时间: |
|
| 查看次数: |
2359 次 |
| 最近记录: |