是否可以为条件需要的对象数组编写自定义道具类型验证器而不会丢失对象验证？

debugcn 发表于 Dev

玛丽亚

我在反应组件中使用道具类型。该组件具有一托data，其应该是这样的对象的数组：[{value: 'some string', id: 123}]。我想添加一个自定义的 prop-type 函数，它使dataif props.useCustomSuggestionsis成为必需false。我试过这样的事情：

data: (props) => {
  if (!props.useCustomSuggestions && !props.data) {
    return new Error('Data must be provided to use default suggestions');
  } else if (props.data && typeof props.data !== 'object') {
    return new Error(
      'Data must be an array',
    );
  }
};

我相信这个工程验证，当阵列需要props.useCustomSuggestions的false，但它不请检查是否在对象data的格式是否正确。是否有另一种编写方法来验证数组由具有value字符串类型和id数字类型属性的对象组成？

我认为react中的customArrayProp文档可能是解决方案，但它没有传递整个 props 对象，所以我失去了data对useCustomSuggestions.

天空男孩

有一种特殊的方法可以直接调用propTypescheck以重用其检查逻辑：PropTypes.checkPropTypes()

data: (props, propName, componentName) => {
  if (props.useCustomSuggestion) {  // data should be validated but is optional
    PropTypes.checkPropTypes({ 
        [propName]: PropTypes.arrayOf(
          PropTypes.shape({
            value: PropTypes.string.isRequired,
            id: PropTypes.number.isRequired
         }) 
        ) 
      }, 
      props, 
      propName, 
      componentName
    );
  } else { // data is required
    PropTypes.checkPropTypes({ 
        [propName]: PropTypes.arrayOf(
          PropTypes.shape({
            value: PropTypes.string.isRequired,
            id: PropTypes.number.isRequired
         }) 
        ).isRequired
      }, 
      props, 
      propName, 
      componentName
    );
  }
}

PS出于未知原因，代码propTypes和框有时会运行检查，有时会默默地跳过它，所以我的代码示例不是100％有效。但是我已经用string/检查了方法number- 就在我试图采用它时arrayOf/shape它开始变得奇怪。

可能您将能够将公共部分（shape的内部）移动到 interterm 变量以减少代码重复，但正如我所说的无法确保。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-29

我来说两句

0条评论

登录后参与评论

Related 相关文章

文章