使用自定义检查扩展 react prop-types 验证答案

【问题标题】：Extending react prop-types validation with custom checking使用自定义检查扩展 react prop-types 验证
【发布时间】：2019-12-09 07:07:22
【问题描述】：

我正在尝试对组件中的 array prop 进行 propTypes 验证。我的 propTypes 验证看起来像这样

Foo.propTypes = {
 columns: PropTypes.arrayOf(
    PropTypes.shape({
      identifier: PropTypes.string,
      displayName: PropTypes.string,
      type: PropTypes.string,
      align: PropTypes.oneOf(['right', 'left', 'center']),
      sort: PropTypes.bool
    })
  )
}

现在我想通过自定义验证来扩展此验证，通过验证列数组中 sort 属性的唯一值应该是 true

我有一个选择是为整个列数组编写自定义验证，该验证将执行 PropTypes.arrayOf 和 PropTypes.shape 验证，然后执行 sort 验证并抛出 error 或 null

但我不想返工，想利用内置的React.PropTypes 进行所有验证，然后添加我的自定义验证

【问题讨论】：

标签： reactjs react-proptypes

【解决方案1】：

prop-types 用于运行时类型检查，您要完成的工作超出了该范围，更像是数据验证。即使有可能，我也不建议为此使用 prop-types。

我特别会警告这一点，因为 prop-types 只会在开发中发出警告。如果您的数据无效，我想您会想要更多的结果，例如取消除一列之外的所有列的排序，或者向您的用户显示某些内容。

【讨论】：

【解决方案2】：

您也可以在自定义验证器中使用PropTypes 包。所以用下面的代码解决了我的问题

Foo.propTypes = {
 columns: function(propValue, key, componentName, location, propFullName) {
    PropTypes.arrayOf(
      PropTypes.shape({
        identifier: PropTypes.string,
        displayName: PropTypes.string,
        type: PropTypes.string,
        align: PropTypes.oneOf(['right', 'left', 'center']),
        sort: PropTypes.bool
      })
    );
    if (propValue.columns.filter(i => i.sort === true).length > 1) {
      return new Error(
        `Invalid prop ${propFullName} supplied to ${componentName}. Only single object can have sort value as true`
      );
    }
    return null;
  }
}

【讨论】：