Reactjs 使用自定义检查扩展react prop类型验证

我正在尝试对组件中的数组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
    })
  )
}

现在，我想通过自定义验证扩展此验证，验证排序属性的列数组中只有一个值应该是

true

我的一个选择是为整列数组编写自定义验证，该数组将执行

PropTypes.arrayOf

和

PropTypes.shape

验证，然后执行

sort

验证并抛出

error

或

null

---

但是我不想做返工，我想利用内置的React.PropTypes来做所有的验证，然后添加我的自定义验证。PropTypes是用于运行时类型检查的，您试图完成的不属于这个领域，更像是数据验证。即使有可能，我也不建议使用道具类型

---

我特别要提醒大家不要这样做，因为道具类型只会在开发中发出警告。如果您的数据无效，我想您可能需要更多的结果，比如从除一列之外的所有列中取消排序，或者向用户显示某些内容。

您也可以在自定义验证器中使用

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