javascript - 是否可以在不丢失对象验证的情况下为有条件要求的对象数组编写自定义 Prop 类型验证器？

Question

我在 React 组件中使用 prop-types。该组件有一个 Prop data它应该是这样的对象数组:[{value: 'some string', id: 123}] .我想添加一个自定义 Prop 类型的功能，使 data如果 props.useCustomSuggestions 则需要是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类型编号？

我以为 customArrayProp React 中的文档可能是解决方案，但它不会传递整个 props 对象，所以我失去了制作 data 的能力有条件地需要 useCustomSuggestions 的值.

Answer 1

有一种特殊的方式来call propTypes check directly重用他们的检查逻辑: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 由于未知原因，codesandbox 有时会运行 propTypes 检查，有时会默默地跳过它，所以我的代码示例并非 100% 有效。但是我已经检查了 string/number 的方法 - 就在我试图将其应用于 arrayOf/shape 时> 它开始变得奇怪。

也许您可以将公共(public)部分(shape 的内部)移动到 interm 变量以减少代码重复，但正如我所说无法确保这一点。