我们可以给组件的 data 指定校验规则。如果传入的数据不符合规则,那么 san 会抛出异常。当组件给其他人使用时,这很有用。

指定校验规则,需要使用 DataTypes 进行声明:

  1. import san, {DataTypes} from 'san';
  2. let MyComponent = san.defineComponent({
  3. dataTypes: {
  4. name: DataTypes.string
  5. }
  6. });

DataTypes 提供了一系列校验器,可以用来保证组件得到的数据是合法的。在上边的示例中,我们使用了 DataTypes.string。当一个 name 得到了一个不合法的数据值时,san 会抛出异常。

考虑到性能原因,dataTypes 只会在 development 模式下进行数据校验。

请参考这里来确认在不同的 san 发布版本中数据校验功能的支持情况。

DataTypes

下边是 DataTypes 提供的各种校验的一个示例代码:

  1. import san, {DataTypes} from 'san';
  2. san.defineComponent({
  3. // 你可以声明数据为 JS 原生类型。
  4. // 默认的以下这些数据是可选的。
  5. optionalArray: DataTypes.array,
  6. optionalBool: DataTypes.bool,
  7. optionalFunc: DataTypes.func,
  8. optionalNumber: DataTypes.number,
  9. optionalObject: DataTypes.object,
  10. optionalString: DataTypes.string,
  11. optionalSymbol: DataTypes.symbol,
  12. // 你也可以声明数据为指定类的实例。
  13. // 这里会使用 instanceof 进行判断。
  14. optionalMessage: DataTypes.instanceOf(Message),
  15. // 如果你可以确定你的数据是有限的几个值之一,那么你可以将它声明为枚举类型。
  16. optionalEnum: DataTypes.oneOf(['News', 'Photos']),
  17. // 可以是指定的几个类型之一
  18. optionalUnion: DataTypes.oneOfType([
  19. DataTypes.string,
  20. DataTypes.number,
  21. DataTypes.instanceOf(Message)
  22. ]),
  23. // 数组中每个元素都必须是指定的类型
  24. optionalArrayOf: DataTypes.arrayOf(DataTypes.number),
  25. // 对象的所有属性值都必须是指定的类型
  26. optionalObjectOf: DataTypes.objectOf(DataTypes.number),
  27. // 具有特定形状的对象
  28. optionalObjectWithShape: DataTypes.shape({
  29. color: DataTypes.string,
  30. fontSize: DataTypes.number
  31. }),
  32. // 以上所有校验器都拥有 `isRequired` 方法,来确保此数据必须被提供
  33. requiredFunc: DataTypes.func.isRequired,
  34. requiredObject: DataTypes.shape({
  35. color: DataTypes.string
  36. }).isRequired,
  37. // 一个必须的但可以是任何类型的数据
  38. requiredAny: DataTypes.any.isRequired,
  39. // 你也可指定一个自定义的校验器。
  40. // 如果校验失败,它应该丢出一个异常。
  41. customProp: function (props, propName, componentName) {
  42. if (!/matchme/.test(props[propName])) {
  43. throw new Error(
  44. 'Invalid prop `' + propName + '` supplied to' +
  45. ' `' + componentName + '`. Validation failed.'
  46. );
  47. }
  48. },
  49. // 你也可以给 `arrayOf` 和 `objectOf` 提供一个自定义校验器。
  50. // 如果校验失败,那么应该当抛出一个异常。
  51. // 对于数组或者对象中的每个元素都会调用校验器进行校验。
  52. // 第一个参数是这个数组或者对象,第二个参数是元素的 key。
  53. customArrayProp: DataTypes.arrayOf(function (dataValue, key, componentName, dataFullName) {
  54. if (!/matchme/.test(dataValue[key])) {
  55. throw new Error(
  56. 'Invalid prop `' + dataFullName + '` supplied to' +
  57. ' `' + componentName + '`. Validation failed.'
  58. );
  59. }
  60. })
  61. });