原文地址：https://qianduan.shop/blogs/detail/13
最近需求遇到了需要用户配置cron表达式的需求，又不能让用户直接输入 *"0/10 * * * * ? " 这种字符串形式的cron表达式，只能通过可视化界面帮助用户生成表达式，鉴于生成逻辑还是比较复杂，于是就开始在网上找现成的轮子来使用。
这里主要介绍两个组件react-cron-antd和qnn-react-cron, 先说结果，我们最终选择qnn-react-cron,因为它bug相对少，支持多语言，就是这样，原因后面细说。
qnn-react-cron改编自react-cron-antd，所以两个组件的功能是一样的，都支持以下功能：
🎉 全面支持cron：秒、分、时、日、月、周、年
🎉 日及周条件互斥，自动改变响应值
🎉 支持反解析cron表达式到UI
🎉 可结合此组件与Antd的下拉及输入组件封装成下拉输入框🎉 全面支持cron：秒、分、时、日、月、周、年
🎉 日及周条件互斥，自动改变响应值
🎉 支持反解析cron表达式到UI
🎉 可结合此组件与Antd的下拉及输入组件封装成下拉输入框
显示效果也是一样的：
7.jpg
那为什么qnn-react-cron的作者要去改编reract-cron-antd组件呢？
因为react-cron-antd作者长时间未更新组件，导致组件无法正常引用，qnn-react-cron除了修复了不能组件不能使用的问题外，在原基础增加：getCronFns、footer 属性使组件更加灵活，修改 value 值传入后或者更新后自动重新渲染。
github上react-cron-antd还有几个尚未解决的issues:
8.png
就在最近几天qnn-react-cron支持了多语言，更Nice了。恰好我们项目需要支持多语言，简直太及时！！
qnn-react-cron 如何使用
直接上代码：
import React from "react";
import Cron from "qnn-react-cron";
// 可使用 QnnReactCron.Provider 配置国际化语言
// 无需配置语言时，可不使用 QnnReactCron.Provider
// QnnReactCron.Provider 应该包裹于入口组件以实现全部路由下的组件内部语言都被自定义
export default ()=>{
// language 为可选参数， 具体配置如下
const language = {
// 面板标题
paneTitle:{
second: "秒",
minute: "分",
hour: "时",
day: "日",
month: "月",
week: "周",
year: "年",
},
// assign 指定
assign: "指定",
// Don't assign 不指定
donTAssign: "不指定",
// Every minute ... 每一秒钟、每一分钟
everyTime: {
second: "每一秒钟",
minute: "每一分钟",
hour: "每一小时",
day: "每一日",
month: "每一月",
week: "每一周",
year: "每年",
},
// from [a] to [b] [unit], executed once [unit] a 到 b 每一个时间单位执行一次
aTob: {
second: (AInput, BInput) => (
<span>
从{AInput}-{BInput}秒，每秒执行一次
</span>
),
minute: (AInput, BInput) => (
<span>
从{AInput}-{BInput}分，每分钟执行一次
</span>
),
hour: (AInput, BInput) => (
<span>
从{AInput}-{BInput}时，每小时执行一次
</span>
),
day: (AInput, BInput) => (
<span>
从{AInput}-{BInput}日，每日执行一次
</span>
),
month: (AInput, BInput) => (
<span>
从{AInput}-{BInput}月，每月执行一次
</span>
),
week: (AInput, BInput) => (
<span>
从{AInput}-{BInput}，每星期执行一次
</span>
),
year: (AInput, BInput) => (
<span>
从{AInput}-{BInput}年，每年执行一次
</span>
),
},
// from [a] [unit] start, every [b] Execute once [unit] 从 a 开始, 每一个时间单位执行一次
aStartTob: {
second: (AInput, BInput) => (
<span>
从{AInput}秒开始，每{BInput}秒执行一次
</span>
),
minute: (AInput, BInput) => (
<span>
从{AInput}分开始，每{BInput}分执行一次
</span>
),
hour: (AInput, BInput) => (
<span>
从{AInput}时开始，每{BInput}小时执行一次
</span>
),
day: (AInput, BInput) => (
<span>
从{AInput}日开始，每{BInput}日执行一次
</span>
),
month: (AInput, BInput) => (
<span>
从{AInput}月开始，每{BInput}月执行一次
</span>
),
// [n] in the NTH week of this month 本月第 n 周的 星期[n] 执行一次
week: (AInput, BInput) => (
<span>
本月第{AInput}周的{BInput}执行一次
</span>
),
// 本月的最后一个 星期[n] 执行一次
week2: (AInput) => <span>月的最后一个{AInput}执行一次</span>,
year: (AInput, BInput) => (
<span>
从{AInput}年开始，每{BInput}年执行一次
</span>
),
}
};
return <QnnReactCron.Provider value={{language}}>
<Cron
value="* * * * * ? *"
// 未自定义底部按钮时，用户点击确认按钮后的回调
onOk={(value) => {
console.log("cron:", value);
}}
// 相当于 ref
getCronFns={(fns) => {
// 获取值方法
// fns.getValue: () => string
// 解析Cron表达式到UI 调用该方法才可以重新渲染 【一般不使用】(value值改变后组件会自动更新渲染)
// fns.onParse: () => Promise().then(()=>void).catch(()=>()=>void),
this.fns = fns;
}}
// 自定义底部按钮后需要自行调用方法来或者值
footer={
[
//默认值
<Button style={{ marginRight: 10 }} onClick={()=>this.fns.onParse}>
解析到UI
</Button>
<Button type="primary" onClick={()=>console.log(this.fns.getValue)}>
生成
</Button>
]
}
/>
</QnnReactCron.Provider>
}
最后附上github地址：https://github.com/wangzongming/qnn-react-cron
用起来还有一个小缺憾就是在ts中没有类型声明文件可以用，有兴趣的同学可以去搞一个发布出来。
网友评论