LOGO

数据校验

编辑本文

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

指定校验规则，需要使用 DataTypes 进行声明：

1
2
3
4
5
6
7
8
9
import san, {DataTypes} from 'san';

let MyComponent = san.defineComponent({

    dataTypes: {
        name: DataTypes.string
    }

});

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

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

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

DataTypes

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import san, {DataTypes} from 'san';

san.defineComponent({

    // 你可以声明数据为 JS 原生类型。
    // 默认的以下这些数据是可选的。
    optionalArray: DataTypes.array,
    optionalBool: DataTypes.bool,
    optionalFunc: DataTypes.func,
    optionalNumber: DataTypes.number,
    optionalObject: DataTypes.object,
    optionalString: DataTypes.string,
    optionalSymbol: DataTypes.symbol,

    // 你也可以声明数据为指定类的实例。
    // 这里会使用 instanceof 进行判断。
    optionalMessage: DataTypes.instanceOf(Message),

    // 如果你可以确定你的数据是有限的几个值之一，那么你可以将它声明为枚举类型。
    optionalEnum: DataTypes.oneOf(['News', 'Photos']),

    // 可以是指定的几个类型之一
    optionalUnion: DataTypes.oneOfType([
        DataTypes.string,
        DataTypes.number,
        DataTypes.instanceOf(Message)
    ]),

    // 数组中每个元素都必须是指定的类型
    optionalArrayOf: DataTypes.arrayOf(DataTypes.number),

    // 对象的所有属性值都必须是指定的类型
    optionalObjectOf: DataTypes.objectOf(DataTypes.number),

    // 具有特定形状的对象
    optionalObjectWithShape: DataTypes.shape({
        color: DataTypes.string,
        fontSize: DataTypes.number
    }),

    // 以上所有校验器都拥有 `isRequired` 方法，来确保此数据必须被提供
    requiredFunc: DataTypes.func.isRequired,
    requiredObject: DataTypes.shape({
        color: DataTypes.string
    }).isRequired,

    // 一个必须的但可以是任何类型的数据
    requiredAny: DataTypes.any.isRequired,

    // 你也可指定一个自定义的校验器。
    // 如果校验失败，它应该丢出一个异常。
    customProp: function (props, propName, componentName) {
        if (!/matchme/.test(props[propName])) {
            throw new Error(
                'Invalid prop `' + propName + '` supplied to' +
                ' `' + componentName + '`. Validation failed.'
            );
        }
    },

    // 你也可以给 `arrayOf` 和 `objectOf` 提供一个自定义校验器。
    // 如果校验失败，那么应该当抛出一个异常。
    // 对于数组或者对象中的每个元素都会调用校验器进行校验。
    // 第一个参数是这个数组或者对象，第二个参数是元素的 key。
    customArrayProp: DataTypes.arrayOf(function (dataValue, key, componentName, dataFullName) {
        if (!/matchme/.test(dataValue[key])) {
            throw new Error(
                'Invalid prop `' + dataFullName + '` supplied to' +
                ' `' + componentName + '`. Validation failed.'
            );
        }
    })

});
© 2021 Baidu EFE