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

Question

我在反应组件中使用道具类型。该组件具有一托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.

Answer 1

有一种特殊的方法可以直接调用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 变量以减少代码重复，但正如我所说的无法确保。

Answer 2

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

data: (props) => {

  if (!props.useCustomSuggestions && !props.data) {

    return new Error('Data must be provided to use default suggestions');

  } else if (props.data && !Array.isArray(props.suggestions)) {

    return new Error('Data must be an array');

  } else if (props.data.length > 0) {

    for (let i = 0; i < props.data.length; i += 1) {

      if (!props.data[i].value || !props.data[i].id) {

        return new Error(

          'Objects in data must include properties "value" and "id"',

        );

      } else if (

        typeof props.data[i].value !== 'string' ||

        typeof props.data[i].id !== 'number'

      ) {

        return new Error(

          'Objects in data array must have property "value" of type string, and "id" of type number',

        );

      }

    }

  }

},