reactjs – 是否可以使用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"]
}

我如何使用PropTypes表达我对byId对象的期望?可能吗?如果是这样,怎么样?

最佳答案
如果你不能用PropTypes的内置proptypes实现你想要的东西,你可以编写自定义proptype检查器.

如果希望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!');
    }
  }
})

上面使用了shape,因此它需要一个带有byId和allIds键的posts对象.它期望byId是一个对象,其属性值也是一个形状的对象,id,author和body是字符串,注释是一个字符串数组.最后,它使用自定义proptype验证器来检查allId中是否存在byId(post ID)中的每个键.如果没有,则抛出错误.但请注意,这不会涵盖allIds具有byIds中不存在的帖子ID的情况.有关更多解决方案,请参见How to know if two arrays have the same values您可以在必要时添加isRequired.

转载注明原文:reactjs – 是否可以使用PropTypes来验证类字典对象? - 代码日志