随笔分类 -  react从入门到放弃

摘要:需求如图: 与后端协商好的表单数据为: 组件代码: /* 阶梯分成组件 */ import React, { useState, useEffect } from 'react'; import { message, InputNumber, Button } from 'antd'; import 阅读全文
posted @ 2022-10-21 14:33 芝麻小仙女 阅读(303) 评论(0) 推荐(0) 编辑
摘要:需求: 在基于react+antd进行开发的页面中,实现导出excel报表的功能 实际场景: 1.简单数据:单层表头+数据 2.复杂数据:多层表头+数据 实现方式: 1.简单数据 简单数据的导出使用了js-export-excel插件,需要自己转换表头数据与表格数据,代码如下: import { u 阅读全文
posted @ 2022-10-21 14:07 芝麻小仙女 阅读(3602) 评论(0) 推荐(0) 编辑
摘要:需求: 在新增&编辑表单中,共分三个表单模块,第二个模块设计为一个可编辑表格组件,其中可选下拉列表依赖外层第一个模块的某条数据值,提供新增、编辑、删除、按规定条件去重等功能,并在第三个模块中自动计算列表数值总和 实现: 1.表单初始化接口的返回约定为三个数组,按模块对应: const [dataSo 阅读全文
posted @ 2022-10-12 17:22 芝麻小仙女 阅读(3629) 评论(0) 推荐(0) 编辑
摘要:图片宽高校验方法: // 上传图片尺寸限制 const checkIconWH = (file: any) => { return new Promise<void>(function (resolve, reject) { const fileReader = new FileReader(); 阅读全文
posted @ 2022-08-24 14:01 芝麻小仙女 阅读(429) 评论(0) 推荐(0) 编辑
摘要:纯列表版效果展示: ① 初始无值,展示为唤醒按钮+文案外链 ②点击按钮唤醒弹窗(简易版示意图) ③配置后 可编辑表格组件文档: https://procomponents.ant.design/components/editable-table 纯列表组件代码: 表单引用: // antd-pro的 阅读全文
posted @ 2022-08-22 15:58 芝麻小仙女 阅读(2249) 评论(0) 推荐(1) 编辑
摘要:参考文档: https://blog.csdn.net/weixin_39887846/article/details/113492372 https://juejin.cn/post/6844904046436843527 index主文件: import type { FC } from 're 阅读全文
posted @ 2022-07-08 10:37 芝麻小仙女 阅读(926) 评论(0) 推荐(0) 编辑
摘要:预期内容: 需求描述:(一期) 1.无数据时:点击按钮打开弹窗,展示【自定义模块】与【选择已有标签模块】,其中自定义模块可以通过输入+回车进行添加,限制条数与总字数并在下方体现,点击确定更新到外层。 2.已选数据需编辑时:点击修改打开弹窗,正确赋值并可以删改数据。 3.后端要求的格式为对象: val 阅读全文
posted @ 2022-03-11 14:55 芝麻小仙女 阅读(1735) 评论(0) 推荐(0) 编辑
摘要:预期效果: 功能描述: 1.初始化只展示一个按钮,通过按钮添加新的组,可删除,可清空 2.每个文案组都是独立的块,具体里面有几个文案,根据后端动态返回的内容进行渲染 3.可以选择已有标题列表中的标题,赋值到输入框中 4.内部有自己的校验,输入框赋值后也应触发校验,其中每个文案可能存在是否非必填、最大 阅读全文
posted @ 2022-03-11 14:08 芝麻小仙女 阅读(790) 评论(1) 推荐(1) 编辑
摘要:最优: arr.filter(Boolean) 遍历: 通过遍历判断数组, 空字符,undefined, null, false , 0转化为布尔类型都是 false来判断,或者直接判断是否=现在的格式 第三方库: 如 Lodash 库 compact方法 阅读全文
posted @ 2021-07-13 09:50 芝麻小仙女 阅读(1103) 评论(0) 推荐(0) 编辑
摘要:没有技术收获,只是记录一下这个报错是form值有问题 原因是单个日期的时间控件下,重置form值的时候数据格式有问题,修改代码: // 重置表单 const reset = () => { const resetValues: any = { ...initialValues }; if (rese 阅读全文
posted @ 2021-07-05 18:02 芝麻小仙女 阅读(3657) 评论(0) 推荐(0) 编辑
摘要:起因:跳转详情页时后端同学需要当前内容的id与name等等参数,而name有可能很长并且有特殊符号 因此,跳转时直接带到query里,拿的时候会丢失: 这里是直接把id与name给后端后,后端直接拿来配置的默认名称,可以发现已经丢失了+这个符号 解决办法:js的encodeURIComponent( 阅读全文
posted @ 2021-06-10 11:12 芝麻小仙女 阅读(1536) 评论(0) 推荐(0) 编辑
摘要:1、css存在的问题 污染:因为css的选择器不具备隔离性,导致最后生成的样式都会污染全局命名空间。落在大型项目中,问题尤为明显。 解决方向:生成唯一的类名; shadow dom; 内联样式; Vue-scoped 方案 其他一些比如无法共享变量(例如主体色等全局样式)、解析方式的不确定性等问题 阅读全文
posted @ 2021-06-08 14:35 芝麻小仙女 阅读(65) 评论(0) 推荐(0) 编辑
摘要:1、组件设计基本原则 单一职责。 也就是: ① 降低组件的复杂度,减少代码量,提升可读性。 ② 降低与其他组件的耦合度(低耦合),从而降低变更导致的对功能的影响。 ③ 提高可复用性,功能单一(高内聚),有明确的边界,不访问其他组件的内部细节,接口最小化,单向数据流...。 2、TIPs 性能:无状态 阅读全文
posted @ 2021-06-07 17:26 芝麻小仙女 阅读(81) 评论(0) 推荐(1) 编辑
摘要:声明props和导出props都和函数组件一样,命名方式也是【组件名+Props】规范。 定义默认的props时,可以直接用static defaultProps ,就不需要用?这个可选操作符修饰(是否必传) 声明state: /** * 组件状态, 不需要暴露 */ interface State 阅读全文
posted @ 2021-06-03 10:53 芝麻小仙女 阅读(55) 评论(0) 推荐(0) 编辑
摘要:给Props类型命名的方式 : 组件名+Props (比如BaseFormProps) 声明组件的方式: 1.使用FC类型声明 FC是FunctionComponent的简写, 这个类型定义了默认的 props(如 children)以及一些静态属性(如 defaultProps) import R 阅读全文
posted @ 2021-06-03 09:46 芝麻小仙女 阅读(187) 评论(0) 推荐(0) 编辑
摘要:前言:因为我是半途接手,之前的前端已经做了一部分,所以有些东西是二次修改,代码冗余之类的请勿在意(功能实现就好),只是一个小总结,有空优化~ 效果: 基本功能:左侧定位栏(大类),中间checkbox.group用来选择,右侧展示已选择的数据&&排序&删除功能,上面搜索列 首先我们需要的数据先定义一 阅读全文
posted @ 2021-05-18 11:15 芝麻小仙女 阅读(1617) 评论(0) 推荐(0) 编辑
摘要:首先接到的任务是这样的: 那么打开参考对象看一眼: 总结一下组件的内容和功能点: 1.一个输入框,两个按钮(确定,取消) 2.点击文本,弹出气泡,进行编辑,提交/取消,关闭气泡,更新数据(数据不变则不更新) 而原本的组件,则是直接点击编辑按钮,变为编辑模式: 因此,我选择了antd提供的Popove 阅读全文
posted @ 2021-04-27 13:20 芝麻小仙女 阅读(673) 评论(0) 推荐(0) 编辑
摘要:import Taro from '@tarojs/taro'; import { View, Image, Text } from '@tarojs/components'; import IconFont from '@/components/iconfont'; import { toast, 阅读全文
posted @ 2020-12-15 11:02 芝麻小仙女 阅读(1301) 评论(0) 推荐(0) 编辑
摘要:组件: {form.getFieldValue('status') '03' && getFieldDecorator('timingPublishTime', { initialValue: isEdit && infomentDetail.timingPublishTime ? moment(i 阅读全文
posted @ 2020-12-11 11:17 芝麻小仙女 阅读(2109) 评论(0) 推荐(0) 编辑
摘要:UI设计图: 组件代码: import Taro from '@tarojs/taro'; import { View, Button } from '@tarojs/components'; import classNames from 'classnames'; import IconFont 阅读全文
posted @ 2020-11-19 14:20 芝麻小仙女 阅读(537) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示