是否可以使用PropTypes来验证类字典对象?

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对象的期望?可能吗?如果是这样,怎么样?

Li3*_*357 9

你可以编写自定义proptype检查器,如果你不能达到你想要的PropTypes'内置proptypes.

如果你想的全值byId要与属性的对象id,author,bodycomments,你可以使用shape,objectOfarrayOf.如果要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,authorbody是的字符串,comments是一个字符串数组.最后,它使用自定义proptype验证器来检查byId(帖子ID)中是否存在每个键allIds.如果没有,则抛出错误.请注意,这不会涵盖allIds具有不存在的帖子ID 的情况byIds.请参阅如何知道两个阵列是否具有相同的值以获得更多解决方案.您可以isRequired在必要时添加.