组件值校验,即在组件值变动时判断是否满足校验逻辑,若不满足校验逻辑,能够拿到校验错误信息进行谬误提醒或其余逻辑解决。
申明 valueValidator
可开启值校验:
import {ComponentMeta} from "designer";
const input: ComponentMeta = {
componentName: "input",
element: Input,
valueValidator: () => ({
required: true,
maximum: 10,
}),
};
如下面的例子,相当于对组件值做了“不能为 undefined
且最大值为 10”的限度。
- 能够内置 JSONSchema validate 的全副校验规定作为内置规定。
- 反对拓展自定义校验规定。
- 反对异步校验。
- 能够用 selector 绑定任意变量(如全局状态
state
或者以后组件实例的props
来灵便定义组件值校验规定)。
当校验出错时,框架也不会做任何解决,而是将谬误抛给业务,由业务来判断如何处理错误。
接下来咱们来具体说说每一项特色。
错误处理
定义了组件值校验后,当校验谬误呈现时,能够通过 selector
的 validateError
拿到错误信息:
const input: ComponentMeta = {
componentName: "input",
element: Input,
valueValidator: () => ({
required: true,
maximum: 10,
}),
runtimeProps: ({selector}) => ({errorName: selector(({ validateError}) => validateError.ruleName),
errorMessage: selector(({validateError}) => validateError.payload),
}),
};
ruleName
: 校验规定名称。payload
: 该规定未命中时的返回值,校验函数返回什么,这里拿到的就是什么。内置的校验函数返回的是错误信息文案。
拿到校验谬误后,通过 runtimeProps
传给组件,咱们可通过组件本身或 element
减少对立的组件 React 容器层解决并展现这些错误信息。
也能够应用 fetcher
接管这个谬误,并调整取数参数。总之反对 selector
的中央都能够响应校验谬误,如何应用齐全由你决定。
自定义校验规定
createDesigner
传递的中间件能够拓展自定义校验规定:
import {createMiddleware} from "designer";
const myMiddleware = createMiddleware({
validateRules: {
// 自定义校验规定,判断是否为空字符串
isEmptyString: (value, options?: { errorMessage?: string}) => {if (value === "") {return true;}
return options.errorMessage;
},
},
});
通过 validateRules
定义自定义校验规定后,就能够在 valueValidator
中应用了:
const input: ComponentMeta = {
componentName: "input",
element: Input,
valueValidator: () => ({
isEmptyString: {errorMessage: "字符串必须为空",},
}),
};
用 selector 绑定校验规定
利用 selector
将校验规定绑定到任意状态,比方:
const input: ComponentMeta = {
componentName: "input",
element: Input,
valueValidator: ({selector}) => selector(({props}) => props.validator),
};
下面的例子,将所有组件名为 input
组件的校验规定绑定到以后组件实例的 props.validator
上。
const input: ComponentMeta = {
componentName: "input",
element: Input,
valueValidator: ({selector}) =>
selector(({state}) => state.validatorInfo),
};
下面的例子,将所有组件名为 input
组件的校验规定绑定绑定到全局状态 state.validatorInfo
上。
异步校验
将自定义校验函数定义为异步函数,就能够定义异步校验。
const myMiddleware = createMiddleware({
validateRules: {isEmptyString: async (value, options?: { errorMessage?: string}) => {await wait(1000);
if (value === "") {return true;}
return options.errorMessage;
},
},
});
如上所示,定义了 isEmptyString
的谬误校验规定,那么当校验函数执行完后,在 1s 后将会呈现校验信息。
总结
组件值校验仍然提供了弱小的灵便拓展性,以下几种定制能力互相正交,将灵活性成倍放大:
valueValidator
利用selector
绑定任意值,这样既能够定义固定的校验规定,也能够定义追随全局状态变动的校验规定,也可定义追随以后组件实例 props 变动的校验规定。- 在此基础上,还能够自定义校验规定,且反对异步校验。
- 更精彩的是,对值校验失败时,如何解决校验失败的体现交给了业务层。咱们再次依靠弱小的
selector
设计,将校验谬误传给selector
,就让校验谬误的用法产生了有限可能。比方用在runtimeProps
能够让渲染响应校验谬误,用在fetcher
能够让查问响应校验谬误。
探讨地址是:精读《组件值校验》· Issue #473 · dt-fe/weekly
如果你想参加探讨,请 点击这里,每周都有新的主题,周末或周一公布。前端精读 – 帮你筛选靠谱的内容。
关注 前端精读微信公众号
<img width=200 src=”https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg”>
版权申明:自在转载 - 非商用 - 非衍生 - 放弃署名(创意共享 3.0 许可证)