是否可以为条件所需的对象数组编写自定义prop-type验证程序而不会丢失对象验证？

Question

我在react组件中使用prop-type。该组件具有道具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的对象组成吗？

[我以为react中的customArrayProp文档可能是解决方案，但是它没有传递整个props对象，所以我失去了使data的值有条件地需要useCustomSuggestions的能力。

Answer 1

call propTypes check directly有一种特殊的方法可以重用其检查逻辑：propTypes

PropTypes.checkPropTypes()

出于未知原因的PS，codeandbox有时会运行

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
    );
  }
}

检查，有时会默默地跳过该检查，所以我并不是100％的代码示例都能正常工作。但是我已经检查了propTypes / string的方法-就在我尝试将其应用于number / arrayOf时，它开始变得很奇怪。

[也许您将能够将公共部分（shape的内部）移动到interm变量以减少代码重复，但是正如我所说，它无法确保做到这一点。

Answer 2

这似乎可以解决问题，如果有人给出了更简洁的答案，或者对以下代码有反馈，请仍然注释或发表您自己的答案。

shape