- 博客(61)
- 收藏
- 关注
RSS订阅原创 react跳转页面redux数据被清除
关键代码如下，页面中有根据redux中state展示的数据，然后在组件卸载的时候会清空redux中存的数据，点击a标签可以打开新的标签页，如下代码会在打开新的标签页，组件卸载，清空redux数据，页面展示的也就是空的了。3. 最后看了下跳转的逻辑，发现a标签中设置href为#，导致点击跳转的时候，当前tab下的页面再次回到当前路径，引起组件卸载，把href参数去掉就可以了。2. 然后使用url状态同步，把页面展示的redux存在url params上，发现还是有些数据展示有问题。
2023-08-31 14:01:00
1417
原创 React实现点击切换组件
若想要实现如上效果，点击不切换左右顺序，只切换选中项，把onClick事件统一成changeActive就可以了。index.less样式文件。
2023-08-10 16:36:55
1181
原创 去掉antd Tree组件 默认title
需要取消默认title，在antd的代码演示中发现，其中一个效果没有title，对比发现，treeData中的title值不同，title值设置成ReactNode就不会出现默认title了，如下。
2023-04-12 15:23:55
756
原创 把平铺数据转换成树形结构
1. 使用antd4的Tree组件，Tree不支持平铺数据，需要自己转换成children套children的数据，使用以下方法。2. 若是使用antd的TreeSelect组件，可以使用treeDataSimpleMode属性。
2023-04-11 11:02:23
338
原创 js的decodeURICompnent后的加号问题
问题描述：从url上取参数然后发送给后端，使用decodeURICompnent空格会转为+如上图所示，query中的引号中应该是空格，现在传给后端的是+
2023-02-01 15:13:33
1318
原创 Antd Form.List支持选中Select值后更新相关联Select选项
Antd Form.List支持选中Select值后更新相关联Select选项。
2023-01-05 14:59:35
1476
3
原创 antd table 被内容撑开，设置columns宽度失效
问题描述：antd table被内容撑开，设置某列的width无效，1. table table-layout去控制。2. 使用columns的render属性去控制。
2022-08-03 10:47:05
2521
原创 react+antd实现尖括号变量追踪
业务需求：尖括号中的数据显示为蓝色，点击后可以出现tooltip，tooltip里面显示对应的值，若tooltip中还含有携带的值就可以继续点击显示tooltip
2022-07-12 10:39:32
412
原创 antd Popconfirm组件样式错乱问题
在表格中使用的时候，Popconfirm组件会出现样式错乱问题，如下：检查组件元素，发现是在body上创建的元素，我这个table带了横向滚动条，实际上body宽度没有那么大，删除按钮在横向滚动条外，所以就会出现样式错乱问题，可以在使用的时候如下操作（设置getPopupContainer，改变浮层渲染父节点）...
2022-06-17 19:01:37
2738
原创 momentjs warning提示
react_devtools_backend.js:4026 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discourag
2022-06-16 17:34:39
951
原创 moment转指定时区的format格式
使用moment转指定时区的 2021-04-12 01:04:05 时间格式，代码如下：const nowData = new Date()//utcOffset可以通过分钟/小时/字符串设置偏移量，如果输入小于16和大于-16，它会将您的输入解释为小时。console.log('nowData 电脑设置的时区时间', nowData)console.log('电脑设置的时区时间', moment(nowData).format('YYYY-MM-DD HH:mm:ss'))consol
2022-05-09 11:11:55
7099
原创 antd4 form表单使用过程中一些问题
1. 表单添加后端校验2. 表单自动填充密码3. warning.js:6 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop
2022-04-22 17:00:47
1806
原创 前端播放后端传的语音流
后端接口返回数据Content-Type: audio/x-wav数据Preview格式如下：前端播放处理方式：1 . 直接使用audio标签，src输入后端接口路径<audio src='http://xxx.xx/api/getFile' />2. 请求失败需要添加提示，对数据处理 ，转为blob数据// 1. 请求时添加 responseType: 'blob'，这样返回数据为blob数据const res = await axios({ me
2022-03-31 14:35:17
4285
1
原创 antd从v3升级到v4
因为项目需求，需要对antd进行一个升级，下面我简述下我升级的步骤1. 安装最新版本antd，升级项目 React 16.12.0 以上2. 若项目中使用了Form表单/Icon组件 安装@ant-design/compatible，然后在之前使用Icon/Form组件的地方使用如下引用方式就可以了，这个只是个兼容性办法，项目可以正常运行，控制台会有警告，等以后有时间了再切换成antd的组件import { Form, Icon } from '@ant-design/compatible'
2022-02-18 14:21:07
5124
原创 常见的移动端布局
1. 宽度自适应布局宽度采取百分比，高度固定，弊端：大屏下，元素宽度拉伸，易变形2. rem布局设置页面的viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> js动态计算并设置html的font-size值 按照pc布局方式正常布局，把px换成rem3. vw+rem布局css3规范中的.
2022-01-22 14:54:19
300
原创 css文本溢出出现省略号
1. 单行文本.box{ width:200px; /*具体宽*/ overflow:hidden; /*溢出隐藏*/ text-overflow:ellipsis; /*文本溢出显示省略号*/ white-space:nowrap; //文本不换行}2. 多行文本/*1*/.box{ width:200px; overflow:hidden; text-overflow:ellipsis; display:-webk
2022-01-21 23:35:58
425
原创 多栏布局方案
1. 两栏布局两栏布局：左侧固定，右侧自适应 方案一： 左右两个盒子，左侧固定宽度 左侧盒子设置position:absolute 父元素设置position:relation,加padding-left:左侧盒子宽 方案二： 左右两个盒子，左侧固定宽度 左侧盒子设置position:absolute 父元素设置position:relation，右侧盒子加margin-left:左侧盒子宽 方案三： 左右两个盒子，左侧固定宽度 父元素di
2022-01-21 23:15:21
622
原创 js导出csv文件
遇到的问题：1. 含有逗号（,）问题描述：因为csv是一种通用的、相对简单的逗号分隔值文件格式，含有, 的字符串导出会根据,分开，占据不同单元格解决办法：我们可以把数据格式从 kakakak ,alakk 处理成 "kakakak ,alakk" 就好，用双引号包裹2. 含有双引号（"）问题描述：如果该字段中有双引号，csv解析会出问题解决办法：该双引号前要再加一个双引号，然后把该字段使用双引号括起来。eg:（lalla"123=>"lalla""123"）方法：co
2022-01-21 12:01:11
3555
原创 分支代码合并
git fetch 命令用于从远程获取代码库，该命令执行完后需要执行 git merge 远程分支到你所在的分支。分支代码合并（sprint合并到dev分支，sprint分支和dev分支都有改动）本地切换到dev分支 // Target branch git fetch originsprint // Source branch git merge origin/sprint // Source branch...
2022-01-19 11:28:27
593
原创 Type assertion on object literals is forbidden, use a type annotation instead.
Type assertion on object literals is forbidden, use a type annotation instead. const [params, setParams] = useState({ valueType: '' } as { valueType: string connectingText?: string })改为下面的写法就好了 const initParams: { valueType: string
2022-01-19 10:33:13
432
原创 css外边距塌陷
1. 父子关系的外边距塌陷原因：父子元素共用一个外边距，给子元素加margin-top时，外边距会作用在父元素身上，取父子外边距的最大值解决：给父元素加padding值 给父元素加border值 给父元素加overflow:hidden（触发BFC） float:left position:absolute2. 兄弟关系的外边距塌陷原因：兄弟元素共用一个外边距，取他们之间最大的margin值解决：给任意一子元素加一个父元素，给父元素加overflow:hidden/sroll/
2022-01-18 23:06:34
155
原创 css水平垂直居中
文本水平垂直居中div{ text-align: center; line-height: height;}元素水平垂直居中1. flex布局.parent { display: flex; justify-content: center; align-items: center;}2. absolute+负margin(子元素宽高明确).parent { width: 100%; height: 100%; position:
2022-01-18 16:14:11
172
原创 Antd 3.x 使用From表单报错
控制台报错：Warning: `defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option.initialValue` instead.Warning: `getFieldDecorator` will override `value`, so please don't set `value` directly and use `setFieldsValue` to set it.&
2022-01-14 10:57:45
1055
原创 一些常用正则表达式
正则表达式字符含义：字符 含义 [\s\S] 匹配所有。\s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行。 \w 匹配字母、数字、下划线。等价于 [A-Za-z0-9_] \cx 匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。 \f 匹配一个换页符。等价于 \x0c 和 \cL。 \n 匹配一个换行符。等价于 \x0a
2022-01-13 11:33:02
269
原创 网站的加载顺序
HTML页面加载和解析流程 ：用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件。浏览器又发出CSS文件的请求，服务器返回这个CSS文件。浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。浏览器在代码中发现一个< img >标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。服务器返回图片文
2022-01-12 23:53:06
471
原创 Antd X6 Edge
Edge动态样式设置.x6-edge { &.edge-processing { path:nth-child(2) { stroke: rgba(57, 202, 116, 0.8); stroke-width: 3px; stroke-dasharray: 8px, 2px; animation: processing-line 30s infinite linear; }}
2022-01-12 18:34:30
1280
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人