关于react.js:react-cron表达式生成组件qnnreactcron

原文地址：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 中没有类型申明文件能够用，有趣味的同学能够去搞一个公布进去。