原文地址：https://qianduan.shop/blogs/d...
最近需要遇到了须要用户配置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的下拉及输出组件封装成下拉输入框
显示成果也是一样的：
那为什么qnn-react-cron的作者要去改编reract-cron-antd组件呢？
因为react-cron-antd作者长时间未更新组件，导致组件无奈失常援用，qnn-react-cron除了修复了不能组件不能应用的问题外，在原根底减少：getCronFns、footer 属性使组件更加灵便，批改 value 值传入后或者更新后主动从新渲染。
github上react-cron-antd还有几个尚未解决的issues:
就在最近几天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/wangzongmi...
用起来还有一个小缺憾就是在ts中没有类型申明文件能够用，有趣味的同学能够去搞一个公布进去。