部门网站建设的工作汇报,青海住房建设网站,中国设计最好的网站,云服务器拿来做网站文章目录一、引子二、配置使用1.安装2.使用#xff08;1#xff09;直接调用#xff08;2#xff09;赋值到表单#xff08;Form#xff09;#xff08;3#xff09;自定义功能按钮#xff08;4#xff09;隐藏指定 Tab#xff08;5#xff09;其他三、常见问题及解…
文章目录一、引子二、配置使用1.安装2.使用1直接调用2赋值到表单Form3自定义功能按钮4隐藏指定 Tab5其他三、常见问题及解决1.兼容低版本 antd 或高版本 react2.useForm 相关报错3.setState inside useEffect 死循环四、拓展学习1.cron表达式翻译 —— cronstrue2.其他 cron 相关 npm 库包含 vue 相关react-cron-generatorvuevcrontabvue-cron-23.在线工具一、引子
Cron 表达式相关知识详见【实战】Linux基础知识必学 —— 定时任务 qnn-react-cron 可以看做 react-cron-antd 的升级版具体“渊源”可见文档现有功能如下 全面支持 cron秒、分、时、日、月、周、年 日及周条件互斥自动改变响应值 支持反解析 cron 表达式到 UI 可结合此组件与 Antd 的下拉及输入组件封装成下拉输入框 国际化支持 TypeScript 支持 直到现在作者依旧在维护这篇文章之前最新库更新日期2023.03.02 npmhttps://www.npmjs.com/package/qnn-react-crongithub: https://github.com/wangzongming/qnn-react-cron . 二、配置使用
1.安装
yarn add qnn-react-cron | npm i qnn-react-cron这一步遇到依赖不兼容问题可见后面内容:三、常见问题及解决 2.使用
引用
import React from react;
import Cron from qnn-react-cron;1直接调用
Cron /啊哈有点简单这样只能显示进行被隔离的操作若要与页面其他组件联动接着往下看。
默认生成表达式并赋值到变量
import React, { useState } from react;
import Cron from qnn-react-cron;export default () {const [cronValue, setCronValue] useState()return Cronvalue{cronValue}onOk{setCronValue}/
}Cron onOk{setCronValue}/ 是 Cron onOk{value setCronValue(value)}/ 的简写 2赋值到表单Form
或是使用了表单Form比如需要将表达式赋值到 input 框中
import React from react;
import Cron from qnn-react-cron;export default () {const { getFieldValue, setFieldsValue } props.formreturn Cronvalue{getFieldValue(cronValue)}onOk{value setFieldsValue({ cronValue: value})}/
}这样点击 生成 按钮即可赋值到 input 框中在 input 框中修改也能同步到组件中。
3自定义功能按钮
但是组件默认带了两个按钮解析到UI、生成要想隐藏 解析到UI 按钮只能将两个按钮全部都走自定义有其他想要的功能比如 重置 也能使用下面的自定义按钮
import React, { useState } from react;
import { Button } from antd;
import Cron from qnn-react-cron;export default () {const { getFieldValue, setFieldsValue } props.formconst [fns, setFns] useState({})return Cronvalue{getFieldValue(cronValue)}// 相当于 refgetCronFns{setFns}// 自定义底部按钮后需要自行调用方法来或者值footer{[//默认值Button style{{ marginRight: 10 }} onClick{()fns.onParse()}解析到UI/ButtonButton typeprimary onClick{()setFieldsValue({ cronValue: fns.getValue()}))}生成/Button]}/
}若是组件用在模态框Modal中组件和模态框在右下方都有按钮可以隐藏默认按钮并将按钮功能解析到UI、生成提取到其他地方比如输入框Input的右侧
import Cron from qnn-react-cron;
import { Form, Input, Button } from antd
// import { useState } from react;const CronIndex () {// const [cronRef, setCronRef] useState()let cronRefconst [ form ] Form.useForm()const { getFieldValue, setFieldsValue } formreturn Form form{form}Form.Item label任务周期 namecronValueInput addonAfter{( Buttontypeprimarystyle{{ margin: -1px -12px, border: none }}onClick{() setFieldsValue({ cronValue: cronRef.getValue() })}生成/Button)}//Form.ItemCronvalue{getFieldValue(cronValue)}getCronFns{fns cronRef fns}// getCronFns{setCronRef}footer{[]}//Form
}export default CronIndex此时效果输入框 实时同步 到组件组件中变化在点击生成按钮时同步到输入框如图 getCronFns 中对于 cronRef 值的获取不建议使用 useState代码中有相关示例已注释掉感兴趣的可以尝试一下 ,会引起报错Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render. 4隐藏指定 Tab
配置面板的隐藏与显示默认如下
Cron// 配置面板的隐藏, false 即隐藏panesShow{{second: true,minute:true,hour: true,day: true,month:true,week:true,year:true,}}// 默认显示哪个面板, 默认为 second 如果隐藏了 second 需要自行设置defaultTab{second}
/隐藏秒默认显示分钟的设置如下
Cron panesShow{{ second: false }} defaultTab{minute} /默认值是* * * * * ? *因此在隐藏某个面板时要做好对该部分隐藏值的处理 5其他
博主这里没有用到语言国际化配置如有需要请参考文末官方文档
三、常见问题及解决
1.兼容低版本 antd 或高版本 react
博主在记录这篇博文时安装的版本是qnn-react-cron1.0.4所支持主要依赖版本
antd“^4.5.2”react“^15.0.0 || ^16.0.0 || ^17.0.0”
若是项目时用的还是比较老的 antd 版本或是 react 版本高于 qnn-react-cron 所依赖版本在安装依赖时会发生如下报错
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: npm-test0.1.0
npm ERR! Found: react18.2.0
npm ERR! node_modules/react
npm ERR! react^18.2.0 from the root project
npm ERR! peer react16.9.0 from antd4.24.8
npm ERR! node_modules/antd
npm ERR! peer antd^4.5.2 from qnn-react-cron1.0.4
npm ERR! node_modules/qnn-react-cron
npm ERR! qnn-react-cron* from the root project
npm ERR! 1 more (react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react^15.0.0 || ^16.0.0 || ^17.0.0 from qnn-react-cron1.0.4
npm ERR! node_modules/qnn-react-cron
npm ERR! qnn-react-cron* from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
...不要慌解决办法就在报错日志中顺便学习英语了嘻嘻
关键词peer匹配的对等的关键句Fix the upstream dependency conflict, or retry修复上游依赖冲突,或重试 原因npm 7.x 之前的版本遇到依赖冲突会忽视依赖冲突继续进行安装npm 7.x 版本开始不会自动进行忽略需要用户手动输入命令两种选择 –force 无视冲突强制获取远端npm库资源 覆盖之前–legacy-peer-deps 忽视依赖冲突,继续安装不覆盖之前 npm install vue-router --force
或者
npm install vue-router --legacy-peer-deps2.useForm 相关报错
参见【已解决】Instance created by useForm is not connected to any Form element. Forget to pass form prop
3.setState inside useEffect 死循环
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render.
详见二.2.(3)案例或博主在大佬提的issues下再次提问https://github.com/wangzongming/qnn-react-cron/issues/21
四、拓展学习
1.cron表达式翻译 —— cronstrue
npmhttps://www.npmjs.com/package/cronstrue
2.其他 cron 相关 npm 库包含 vue 相关
react-cron-generator
npmhttps://www.npmjs.com/package/react-cron-generatordemohttps://sojinantony01.github.io/react-cron-generator/
vuevcrontab
npmhttps://www.npmjs.com/package/vcrontabdemohttps://small-stone.github.io/vCrontab/dist/
vue-cron-2
npmhttps://www.npmjs.com/package/vue-cron-2demohttps://1615450788.github.io/vue-cron/dist/index 搜索其他 vue cron 相关https://www.npmjs.com/search?rankingpopularityqvue-cron (排序条件Optimal匹配度Popularity受欢迎度Quality质量Maintenance维护时间) 3.在线工具
quartz/Cron/Crontab表达式在线生成工具-BeJSON.com在线Cron表达式生成器pppet在线Cron表达式生成器qqe2 npmqnn-react-cron - npm over
