- 博客(77)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 【react+antd4.x】本地和环境上功能展示不一致
最近在升级antd，整出来一些奇奇怪怪的问题。本地功能是完全正常的没有其他问题，上到测试环境就不可以了。这事儿搞了几天，心态爆炸属于是最后看了antd的更新日志，发现4.18.0改了Table的某些内容，感觉很有可能和这个有关。把antd版本降下来，发到环境上终于好了。如果本地功能都是正常的，发到环境上有问题，也许是antd版本的问题可以看一下日志，降版本，版本太高不稳定...
2022-03-01 17:03:11
1169
原创 【react+antd4.x】Form+Table可编辑单元格点击编辑错误展示为上一条内容
想直接看解决方法，目录中就有简述目录一、问题描述二、解决方案方案一（官方）： 使用setFieldsValue来进行更新方案二：调用resetFields()方法，对表单进行重置一、问题描述需求使用了Form+Table。在第二次点击编辑的时候就会展示上一次点击那条的内容。在这个地方是复用了Form.Item，这部分会产生数据残留的问题，估计是不是存在了树里面。官方对于这种问题有给出解决方法二、解决方案在这边说两个解决方法，一个..
2022-03-01 16:56:30
1194
原创 【antd+react】antd, 退钱【大写的感叹号】（4.x版本不稳定）
这段时间在前端整合，升级了React和antd的版本。当时的我，还不知道自己即将经历什么，也不知道自己到底打开了怎么一个巨大的潘多拉魔盒。v3升级v4的文档，都快看出包浆来了，还是遇到各种各样、离离谱谱、奇奇怪怪的问题，心态大面积爆炸。最近遇到一个特别离谱的问题。在本地连测试环境功能完全正常，一上到测试环境就有问题。（关键是研发环境还不能发）出现的问题是可编辑单元格Table组件，点击编辑按钮，死活不再去判断置灰其他行并且出现确认、...
2022-02-28 18:46:37
649
原创 【React+antd】antd 4.X Select组件 传入defaultValue变化 展示不变
一、问题描述升级antd到4.x之后，官网文档上发现没有提及initialValue，于是使用了defaultValue。改组件设置初始值，从接口调入。页面初始进入接口没有返回的时候，对应数组数据为空；等到接口返回数据后，对应数组也塞入正确数据，但是Select组件展示表现还是为空。（我用的是多选）二、解决思路因为之前解决过一个 打开列表中不同Drawer，展示数据不变化的问题。所以联想，会不会是在页面...
2022-01-10 13:56:35
878
原创 【React+antd】antd 4.X Table组件中复选框选中某一行单表现为全选现象
目录一、问题产生背景二、问题解决思路三、解决方案一、问题产生背景升级antd从3.x到4.x，重构页面。有些代码在3.x可以正常跑，但在4.x就会有形形色色、奇奇怪怪的问题。这次就是关于Table组件复选的问题。表现为，选择其中一行内容，却一下子全选了当页所有的数据，有时又会突变成选不中。如下图二、问题解决思路 从表现看不出来有什么问题，于是先打印了下 rowSelection 的 selectedRo...
2021-12-30 15:22:06
2122
4
原创 【antd】antd组件设置width为100%不生效
不想看长篇大论，直接从目录跳转到解决方案即可目录一、问题背景二、解决思路三、-webkit-fill-available 详解四、解决方案一、问题背景 antd升级到v4之后，伴随着一些奇怪的问题，在v3的时候没有出现 我遇到的是 InputNumber 组件，需要重写覆盖它的样式。但是使用了antd v4新覆盖方式还是不起作用。一筹莫展二、解决思路尝试多种方法...
2021-12-24 16:14:03
2348
原创 【antd】antd 4.X中inputNumber组件设置宽度失效
目录一、问题背景二、解决思路三、解决方案一、问题背景 antd组件库升级，有些地方不兼容或是类名变更导致一些奇怪的问题 这次遇到的问题是，用了Input中inputNumber类型的组件。可是给其设置width失效，于是想着找下什么原因导致的二、解决思路 看了下元素，发现新版本给其设置了默认的width： 90px，我设置的width直接失效 所以应该把其默认设置的宽度给覆盖掉...
2021-12-24 15:49:51
2489
原创 【antd】antd 4.X Select组件样式覆盖失效
一、Select组件覆盖对应名称变更antd从3.x升级到4.x之后，某些组件因为版本升级后原有的样式类名进行了改动。 在涉及到样式覆盖重写的情况下，改动样式类名的组件需要根据原有的样式，对当前版本组件的样式改写 Select组件类名就发生了变化，对应名称从 ant-select-selection 变更为 ant-select-selector二、覆盖方式antd从3.x升级到4.x后，想要覆...
2021-12-24 10:05:16
1361
原创 【antd】antd 4.X Icon组件引入及使用方式变更
一、Icon引入方式变更从直接对其在antd引入Iconimport { Icon } from 'antd'变更为从 @ant-design/icons 引入 对应的名称代码如下：import { LeftOutlined } from '@ant-design/icons'二、Icon使用方式变更使用时不再是在Icon组件api type中填写对应图标名称<Icon type="smile" />变更为...
2021-12-24 09:34:50
2609
原创 【React+antd】打开列表中不同Drawer，展示数据不变化
如果不想看具体使用情况，我把解决方案写在最开头方案一：设置key值，new Date().getTime() 方案二：添加 destroyOnClose 属性目录一、问题描述二、解决方案方法一：设置key值方法二：destroyOnClose 属性一、问题描述表格table中每条数据有编辑操作，点击编辑按钮，右侧会弹出抽屉让用户进行编辑 是 antd 中 Table + Drawer + Form 以前...
2021-12-20 16:56:49
1941
原创 【CSS】关键字 -webkit-fill-available 详解
目录一、问题描述二、详细解释三、解决方案一、问题描述 在进行代码编写的时候发现给antd的inputNumber组件设置width时，不生效。尝试多次无果后，问了同事，同事掏出了一个关键字 -webkit-fill-available 后成功生效。 所以对其产生了兴趣，在网上检索下，用的必应竟然没找到相关信息。（想起来了，不是必应检索不到，是因为过滤机制，在关键词前添加-起到过滤作用。）觉得这个属性值是两个字...
2021-12-17 11:04:41
12417
6
原创 页面隐藏元素利用F12进行定位
解决方法：使用选取快捷键ctrl+shift+c 不知道如何操作可看下面步骤目录一、问题描述二、问题解决三、操作步骤一、问题描述 最近在做测试自动化，测试需要取得该元素的唯一标识。对于下拉框等一些隐藏元素，必须鼠标点击后不进行其他操作，或者必须悬浮其上时才能展现。这样就没法直接使用鼠标去选中查看。 这个问题我之前也遇到过，但是自己写的代码，直接代码里debugger也能行，就没有在直接在页面选取的迫切需求。但时测试取得也有其他...
2021-10-14 15:52:40
5961
原创 【react】启动新项目时报错:Uncaught TypeError: Cannot read property ’forEach‘of undefined
一、问题描述 忙里偷闲，想重开个项目，用作练习项目。但是在 npm i ，启动后，项目没有出现React转圈圈的动画。一开控制台报了如下错误：二、问题解决思路 本来想顺藤摸瓜找到这个文件看看那句话是咋回事，但是用vscode打开的工程里全局搜愣是找不到。我自己去node_moudle顺着字母找下去，也毫无收获，没这文件。 但是无论我怎么重新启动都报这个错，然后不信邪就去直接找项目文件夹。嘿，很轻松一眼找到了。 ...
2021-09-10 14:20:44
1120
2
原创 安装installca_windows.exe时，安装失败并报出“安装Firefox根证书失败，请退出Firefox浏览器或升级......“
目录一、问题描述二、解决方法1、找到如下地址处以.default结尾文件2、删除该文件3、再次安装installca_windows.exe一、问题描述 昨天突然之间用公司网的时候百度等一系列网站都显示”您的连接不是私密连接“，网站的证书有问题。昨天发现是网络的问题，去问也说是网络配置有问题。 今天一来还是不行，就想着重新安装下installca_windows.exe。 结果就报出以下问题，昨天也是这个，想着别懒了...
2021-06-30 09:24:30
1243
1
原创 您目前无法访问XXXX，因为此网站使用了HSTS
一、问题出现 早上来打开电脑，开始写代码！Link-Start！！！ 遇到不会的，查！ 您的链接不是私密连接。。。。。 我：%·~%*￥&￥#￥#%%二、问题解决1、Chrome浏览器解决方法（1）在地址栏输入以下内容chrome://net-internals/#hsts...
2021-06-29 10:44:56
7648
3
原创 【react+antd】使用Table组件报错Unhandled Rejection (TypeError): data.slice is not a function
一、问题描述 需求要把从后端取到的数据放到table中展示，因为还没有联调，前后端都在各自开发各自的，于是我自己根据需要编了写伪数据填进去。结果就开始报错，Table.js:968 Uncaught (in promise) TypeError: data.slice is not a function。如下图：二、解决思路 看了下报错提示，在Table.js里，那就是Table组件使用出问题了。那么肯定就是里面填的值有问题呗。以下是我编的伪数...
2021-06-28 15:06:04
3525
原创 【antd】使Pagination分页组件居中展示
不想看长篇大论，直接跳转到解决方案咩目录一、问题描述二、解决思路1、忆往昔峥嵘岁月稠（以前好像解决过????）2、正入万山圈子里，一山放过一山拦（居中但没完全居中????）3、柳暗花明又一村（前人坑我????）三、解决方案1、单独使用分页组件2、使用组件中分页api四、感想心情一、问题描述 接了一个以表格展示居多的需求，其中有关于table的分页展示内容。UI给的设计图中分页部分是居中展示的，但初始是居右侧展示所以样式需要修改
2021-06-25 17:13:35
5025
1
原创 【React】报错：Error: Element type is invalid: expected a string (for built-in components) or a class/fun
CSDN，记录今日份离谱事件不想看长篇大论可以解决方法如下，但只适用于我这个问题：解决方法：在引用组件处路径后加.jsimport XXXXX from "./XXXXX.js"目录一、报错描述二、解决思路三、解决方案（仅适用我这种错误情况）四、心情感想一、报错描述 我在一个组件中引用另一个封装好的组件，然后，报错了 那报错的信息多的可谓是，错山错海、错上加错、错得离谱，红彤彤一片有一种罄竹难书的感觉（就不具体放出来了）...
2021-06-24 16:54:40
2846
原创 【React】antd中Form和栅格组成实现响应式布局中formItemLayout内容详解
之前在编写代码过程中一度不理解formItemLayout中labelCol和wrapperCol以及中填写内容都表示什么（主要还是太菜，心疼的抱住拉胯的自己）还在论坛里问了问题，但是没有人回答我（可能是觉得问题太简单了），哭得更大声了一、官网样例在antd官网的Form表单使用的实例中抽一个作为解释案例样式：代码：二、formItemLayout内容解释1、解释准备阶段示例中是将栅格和Form表单合起来使用的，因为栅格是支...
2021-04-26 10:16:42
10846
10
原创 【react】this.setState一个属性，另一个属性值也跟着改变
目录一、问题描述二、问题分析三、问题解决1、JSON.stringify将对象转化成字符串2、JSON.parse把字符串转成新的对象3、这样创建的对象就会指向新的地址，当进行修改的时候，另一个属性值不变四、涉及相关知识1、JavaScript中基本数据类型和引用类型2、访问方式一、问题描述在完成一个需求的时候，遇到了一个离谱的事情。我在生命周期函数中，页面渲染之前就调用一个接口固定了一个state中一个属性的值，然后其他地方都是用它给另一个属性赋值.
2021-03-30 09:59:56
1364
1
原创 【React】报错：react.development.js:315 Warning: React.createElement: type is invalid。。。
目录一、问题描述二、问题原因分析三、问题解决四、总结一、问题描述今天写新需求的时候，老js文件中动辄几千行，前人把好多东西都揉在一起。想着新功能就写在新的js文件中好了。于是引用了新的js文件，可是报出了如下错误二、问题原因分析隐约知道应该是引入方面或者是导出方面的问题，但是也没有准确定位到在哪里有问题最后在网上检索了下相关问题，好像也不是很沾边于是又看了看代码，很明显发现ctrl点击的时候不跳转，鼠标悬浮其上出现的信息有问题。那就一定是引..
2021-03-10 14:29:02
1929
原创 【React】replace(“\n“,“ ＜br＞“)失效
最近又有日志展示优化的需求进行转换的时候replace("\n"," <br>")失效了于是找了下解决方法解决方法在\n之前再加一个\，让其进行解析，有效发现要是有些字段认不出来，就在之前疯狂加\，就可以了...
2021-02-04 10:48:34
1807
原创 利用正则表达式截取链接中所需信息
目录一、需求要点二、实现思路1、正则截取两个字符串之间及字符串前后内容的方法2、先将字符串倒置，再进行截取3、正则获取指定字符（最后一个/）之间内容（最终解决）三、后记一、需求要点接到一个需求在用户选择Git工程地址后，项目名称默认为其Git代码库名其中Git代码库的名称需要我自己从链接中进行截取，首先想到的自然就是正则表达式二、实现思路首先想到的就是借助正则表达式来进行实现但是，作为一个菜鸡，不太懂正则表达式，只能在网上看看有没有相关的实..
2021-01-07 10:23:18
828
原创 【React】实现日志查看以下载.txt文件形式展示
一、前言还记得11.18日才寤寐思服地写出来日志以弹窗形式实时展示昨天下午让做成其他样式，主要是因为有些日志过大，对其产生的压力太大，老是挂掉于是决定做成点击下载，将全量日志下载到本地二、前提条件后端以二进制流将日志内容传输过来三、解决思路其实改成这样实际上变得简单了不少，经过路径也会少很多1、触发点击事件取得入参在a标签触发点击事件后调用downloadFullLog，因为antd的table中每行数据都存储在record中，从中取出...
2020-11-26 11:16:05
1296
2
原创 【React】利用modal、codemirror实现日志查看并且实时展示功能
一、前言最近，被分配了一个需求要完成展示日志并且做到实时刷新展示。在此记录一下完成时的思路、遇到的困难以及解决方法以下界面展示：二、解决思路1、展示界面：Modal点击查看会进行日志展示，以弹窗的形式进行展示2、日志展示：codemirror毕竟是展示日志，所以使用代码编辑codemirror3、实时更新数据：定时器三、实现过程及遇到问题解决1、在Table中添加查看一列{ title: 'XX日志', ...
2020-11-18 11:26:01
3717
1
原创 CodeMirror属性之scrollbarStyle
在写一个项目需要展示日志，所以选择使用CodeMirror来进行展示于是去看了其官方文档codemirror用户使用手册scrollbarStyle文档地址：https://codemirror.net/demo/simplescrollbars.html 一、官方文档scrollbarStyle描述1、滚动条默认为native，样式如下（1）行数不多的时候不显示滚动条（2）行数较多显示Y轴滚动条2、还可设置为null将滚动...
2020-11-10 13:57:19
3508
原创 antd之Select组件mode属性使用
最近忙的飞起，好久没写文章了，偷得浮生半小时闲，写个最近发现的有趣的antd属性吧官方文档对mode属性的描述有趣的是mode中的tags选项如果将mode设置为tags的话，输入的内容会变成下拉框中的一个标签如下图：输入内容（原本下拉框中是没有这个选项的，输入后选择就自动添加到下拉框中）选择，在下拉框中就能出现这个选项了而且输入用逗号分隔的内容也是自动变成下拉框中的标签还蛮有趣的，个人猜测是通过识别逗号进行分割再将其变成标签...
2020-11-04 17:22:00
4665
原创 调用接口数据无法展示在页面上
在写代码的时候，调用接口，数据总是没办法显示在页面上一直在找原因，真的是特别奔溃修改前代码：request = ()=> { let baseUrl = 'https://www.easy-mock.com/mock/。。。。' axios.get(baseUrl+'/table/list').then((res) => { if( res.code === 200 ) { this.setState({ dataS
2020-09-30 16:43:53
2014
原创 React中使用antd报错：TypeError: antd__WEBPACK_IMPORTED_MODULE_1__.Form.create(...) is not a function
问题描述：最近在学着使用antd的表单组件，刚开始写就给我报错，疯了报出以下错误：报的错就尼玛离谱，在网上搜了，说是antd的版本不对，让换3.X的版本然后就换呗，到antd官网看了下有什么3.X的版本，安装好之后，又报错了错误信息如下：这个时候我才意识到原来是我函数给拼错了为什么一开始不报这个错？VS也顺利通过编译，明明使用了函数还没有定义不知道为什么就给编译通过了，平时有一点点无关痛痒的错误就报得和天塌下来一样。真真是迷惑行为问题解决：1、看...
2020-09-29 09:20:29
4799
1
原创 在React中引入antd样式不生效
写代码的时候使用antd的组件，觉得还是比较方便的（虽然antd密闭性也太好了）之前也出现过，因为下载antd出现的问题，使用npm的源国内无法使用。可以使用淘宝的镜像源，要是还不行就用手机的热点下载可是这次出现antd样式不生效的问题，我就装antd了好几遍，npm、cnpm、yarn都试了还是不行于是在网上找，但是其中的解决方法好像都没有对症下药，然后我有去官网看了下引入方法有以下表述：我的代码是在scr下的其他文件夹中写的，并且js文件没有创建对应css文件，应该不需要引.
2020-09-28 16:16:54
4610
2
原创 给antd的Select组件添加搜索功能
有时下拉列表太长，找起来也不方便（悄悄嘀咕：就十个出头的选项有什么看不过来的，动动小指头下滑找一下不行吗）看了官方文档，有如下属性叙述：将两个属性配合使用<Select ... showSearch="true" optionFilterProp="children"> <Select.Option value="1-1" key="1-1">111</Select.Option> <Select.Option
2020-09-23 09:05:55
3659
原创 antd中List组件设置分页居中
问题描述： 想要对List组件的分页进行居中展示，但是查看了官方文档发现pagination没对于位置的设置只有三种可以选择，一度不知道该如何让分页居中显示问题解决： 换了一种思路，不再使用List自带的pagination属性，而是使用其Pagination组件进行分页展示 但是坑爹的是，官方文档里Pagination连position属性都没有进行描述。（十分惊喜，呵呵） 最后，我给其设置了style，进行了手动居中&...
2020-09-22 14:34:31
2161
3
原创 不使用Form表单实现页面查询重置功能
问题描述： 因为有些页面中的查询选择框太多了，所以要求在这些页面上添加重置按钮 选择框使用的是antd的Select组件，antd的组件好用是好用，但是密闭性太强了，想要根据需求自定义就会变得很困难 其中Select组件中占用了value这个属性，将其定义为：指定当前选中的条目 这就带来一个问题，原本初始时我设置了placeholder，给出提示信息，结果现在直接就显示下拉框中的第一条信息。 我准备使用点击Button...
2020-09-22 14:05:53
382
原创 人间迷惑行为：为栅格的Col使用calc函数设置min-width时，栅格样式失效
在网上跟着视频学习，真的迷惑行为，我在Col中使用calc函数设置min-width样式的时候，出现了栅格样式失效的情况不要写成100% - 30px，盛不下，把右面的内容挤下去了。事情是这样的：跟着老师一起打的以下代码：.nav-left { min-width: calc(100% - 30px); height: calc(100vh); background-color: aqua; ..
2020-09-03 17:17:40
627
2
原创 配置LESS文件报错：ValidationError: Invalid options object. Less Loader has been initialized using an option
按照网上的配置LESS文件的步骤进行配置之后，配置步骤报错：在网上查找资料发现是less-loader版本的问题，要将该版本回退到5.0.0，但是具体为什么将版本回退我还不知道是为什么查找到的资料解决方法：删除已安装的less-loaderyarn remove less-loader安装5.0.0版本yarn add [email protected]之后，成功...
2020-09-02 15:22:14
16219
3
原创 暴露webpack配置文件时报错：Remove untracked files, stash or commit any changes, and try again.
使用yarn eject 时，报错：使用npm add eject 时报错：
2020-09-02 14:09:20
203
原创 在less中书写的样式失效
在less文件中写了一个样式，让一个div中的所有div都呈现position： absolute.filterCol { & > div { position: absolute; }}可是在网页里这个样式完全失效问了师傅，发现是在className的书写格式上出现问题原本写的className格式：<div className="filterCol">应该改成:<div c..
2020-08-20 16:52:15
1463
空空如也
求大家推荐一个适合React的富文本编辑器组件
2021-01-29
CodeMirror组件实现字符串中链接以超链接形式展示并能够跳转
2021-01-27
TA创建的收藏夹 TA关注的收藏夹
TA关注的人