通过自定义检查扩展反应道具类型验证

Question

我正在尝试对组件中的数组 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来做所有的验证，然后添加我的自定义验证

Answer 1

您也可以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;
  }
}