- 博客(52)
- 收藏
- 关注
RSS订阅原创 react跳转页面redux数据被清除
关键代码如下，页面中有根据redux中state展示的数据，然后在组件卸载的时候会清空redux中存的数据，点击a标签可以打开新的标签页，如下代码会在打开新的标签页，组件卸载，清空redux数据，页面展示的也就是空的了。3. 最后看了下跳转的逻辑，发现a标签中设置href为#，导致点击跳转的时候，当前tab下的页面再次回到当前路径，引起组件卸载，把href参数去掉就可以了。2. 然后使用url状态同步，把页面展示的redux存在url params上，发现还是有些数据展示有问题。
2023-08-31 14:01:00
1461
原创 去掉antd Tree组件 默认title
需要取消默认title，在antd的代码演示中发现，其中一个效果没有title，对比发现，treeData中的title值不同，title值设置成ReactNode就不会出现默认title了，如下。
2023-04-12 15:23:55
801
原创 把平铺数据转换成树形结构
1. 使用antd4的Tree组件，Tree不支持平铺数据，需要自己转换成children套children的数据，使用以下方法。2. 若是使用antd的TreeSelect组件，可以使用treeDataSimpleMode属性。
2023-04-11 11:02:23
375
原创 Antd Form.List支持选中Select值后更新相关联Select选项
Antd Form.List支持选中Select值后更新相关联Select选项。
2023-01-05 14:59:35
1513
3
原创 antd table 被内容撑开，设置columns宽度失效
问题描述：antd table被内容撑开，设置某列的width无效，1. table table-layout去控制。2. 使用columns的render属性去控制。
2022-08-03 10:47:05
2620
原创 antd Popconfirm组件样式错乱问题
在表格中使用的时候，Popconfirm组件会出现样式错乱问题，如下：检查组件元素，发现是在body上创建的元素，我这个table带了横向滚动条，实际上body宽度没有那么大，删除按钮在横向滚动条外，所以就会出现样式错乱问题，可以在使用的时候如下操作（设置getPopupContainer，改变浮层渲染父节点）...
2022-06-17 19:01:37
2835
原创 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
1007
原创 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
7220
原创 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
1870
原创 常见的移动端布局
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
311
原创 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
434
原创 多栏布局方案
1. 两栏布局两栏布局：左侧固定，右侧自适应 方案一： 左右两个盒子，左侧固定宽度 左侧盒子设置position:absolute 父元素设置position:relation,加padding-left:左侧盒子宽 方案二： 左右两个盒子，左侧固定宽度 左侧盒子设置position:absolute 父元素设置position:relation，右侧盒子加margin-left:左侧盒子宽 方案三： 左右两个盒子，左侧固定宽度 父元素di
2022-01-21 23:15:21
649
原创 js导出csv文件
遇到的问题：1. 含有逗号（,）问题描述：因为csv是一种通用的、相对简单的逗号分隔值文件格式，含有, 的字符串导出会根据,分开，占据不同单元格解决办法：我们可以把数据格式从 kakakak ,alakk 处理成 "kakakak ,alakk" 就好，用双引号包裹2. 含有双引号（"）问题描述：如果该字段中有双引号，csv解析会出问题解决办法：该双引号前要再加一个双引号，然后把该字段使用双引号括起来。eg:（lalla"123=>"lalla""123"）方法：co
2022-01-21 12:01:11
3613
原创 分支代码合并
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
607
原创 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
451
原创 css外边距塌陷
1. 父子关系的外边距塌陷原因：父子元素共用一个外边距，给子元素加margin-top时，外边距会作用在父元素身上，取父子外边距的最大值解决：给父元素加padding值 给父元素加border值 给父元素加overflow:hidden（触发BFC） float:left position:absolute2. 兄弟关系的外边距塌陷原因：兄弟元素共用一个外边距，取他们之间最大的margin值解决：给任意一子元素加一个父元素，给父元素加overflow:hidden/sroll/
2022-01-18 23:06:34
167
原创 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
181
原创 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
1098
原创 一些常用正则表达式
正则表达式字符含义：字符 含义 [\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
286
原创 网站的加载顺序
HTML页面加载和解析流程 ：用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件。浏览器又发出CSS文件的请求，服务器返回这个CSS文件。浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。浏览器在代码中发现一个< img >标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。服务器返回图片文
2022-01-12 23:53:06
482
原创 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
1305
原创 流程图拖拽效果
/*e: 鼠标事件 部分代码*/ import { Addon } from '@antv/x6'initShape=(e)=> { // 拖拽添加节点 const dnd = new Addon.Dnd({ target: this.graph, //目标画布（必传） animation: true }) const node= this.graph.createNode({ width: 100, .
2022-01-12 16:00:33
1946
原创 css宽度变化动画
transition 属性设置元素当过渡效果，四个简写属性为：transition-property transition-duration transition-timing-function transition-delay注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。默认值： all 0 ease 0 继承： no 版本： CSS3 JavaScript 语法： object.sty
2022-01-07 16:14:24
5931
原创 Antd 3.x Table表单筛选功能重置和确认按钮互换
刚开始想复杂了，想着互换的话就需要自己通过Table的(filterDropdown，filterDropdownVisible，filtered，filteredValue)几个API写下那个功能，后来一想就是样式变换啊，如下设置样式就OK了~默认：效果：.ant-table-filter-dropdown { .ant-table-filter-dropdown-btns { .ant-table-filter-dropdown-link { &..
2022-01-06 10:51:21
2029
原创 git commit相关命令
git commit 命令将暂存区内容添加到本地仓库中。git commit -m [message]：提交暂存区到本地仓库中，[message] 可以是一些备注信息。
2021-12-10 12:00:07
5462
原创 git stash相关命令使用
git stashsave "message"/git stash: 执行存储时，添加备注，方便查找，只有git stash也可以，但查找时不方便识别。 git stash pop: 命令恢复之前缓存的工作目录，将缓存堆栈中的对应stash删除，并将对应修改应用到当前的工作目录下,默认为第一个stash,即stash@{0}，如果要应用并删除其他stash，命令：git stash popstash@{$num} ，比如应用并删除第二个：git stash popstash@{1} git sta...
2021-12-07 17:46:14
156
原创 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you me
控制台报错：Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?react封装了一个公共组件（组件中使用了connect连接redux）其它地方引用该组件后就会提示以上错误解决办法：导出组件的时候添加 { forwardRef: true }export default connect(ma
2021-11-29 17:20:48
777
1
原创 一些常用运算符
1、! 可将变量转换成boolean类型，null、undefined和空字符串取反都为true，其余都为false,也可用作boolean的取反。console.log(!null) // trueconsole.log(!undefined )// trueconsole.log(!'') // true//布尔值取反console.log(!false) // trueconsole.log(!true) // false2.!! 常用来做类型判断，在第一步!强制转换后之后再做
2021-11-26 14:56:40
337
原创 Js实现复制文本能力
使用 document.execCommand()export const copyValues = (value) => { const input = document.createElement('input') document.body.appendChild(input) input.setAttribute('value', value) input.select() if (document.execCommand('copy')) { documen
2021-09-08 15:04:37
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人