![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
南城夏季
一路浅行
展开
-
react 使用 富文本编辑器并支持MD,同时支持<Form.Item/>的可控输入
在react ant 使用中,我们可以看到,Input 输入变化后,值会自动绑定到form实例上,同时,form set值以后,Input 也会跟着变化。这里面Input 默认挂载了两个属性value和onChange,从而做到了双向绑定,所以我们也可以实现一个这个的自定义可控组件。原创 2024-06-03 14:37:05 · 319 阅读 · 0 评论 -
react hook使用UEditor引入秀米图文排版
里面坑比较多,细节也比较多以下使用的是react 18 + ice3.0,使用其他react脚手架的配置基本相同,例如umi4。原创 2024-02-21 15:19:22 · 1337 阅读 · 0 评论 -
react ant tree节点没有children也会显示展开框 节点有children却不显示展开框
后端同步了其他系统的数据,而这份数据加了isLeaf,影响了树是否支持展开的判断。原创 2023-12-28 09:09:06 · 765 阅读 · 0 评论 -
react ant upload上传请求参数变成了 file:[object object]
文件对象需要取里面的一层,即originFileObj。原创 2023-09-15 14:30:53 · 579 阅读 · 0 评论 -
react ant ice3 实现点击一级菜单自动打开它下面最深的第一个子菜单
让一级菜单进行全拼接,二三级等子菜单不做处理,仍然保持当前的path,也就是点击一级菜单自动打开它下面最深的第一个子菜单。可以看到每层菜单的path都只有当前的路径,没有进行全拼接。原创 2023-09-12 14:01:09 · 323 阅读 · 0 评论 -
js使用jsencrypt报错:navigator is not defined window is not defined
在react中使用了jsencrypt进行加密,前一天能正常加密,第二天运行的时候就报错,具体做了哪些操作,忘记了,应该有执行。应该是执行了npm install 拉取了新版的jsencrypt,导致版本不兼容。经过测试,发现最新的版本。原创 2023-08-11 16:16:14 · 1027 阅读 · 0 评论 -
react ant table 根据接口动态渲染表头
使request获取list,renderFormItem回调里面第二个参数中就有request的返回值,根据这个去渲染就可以了。原创 2023-07-13 11:10:36 · 1307 阅读 · 0 评论 -
ant table 单元格合并时 RowSelection 没有合并
动态合并 rowSelection, 使用 renderCell 来处理 rowSelection 的单元格合并。原创 2023-07-10 08:43:48 · 692 阅读 · 0 评论 -
umi4使用状态管理dva
【代码】umi4使用状态管理dva。原创 2023-07-04 16:53:11 · 1823 阅读 · 0 评论 -
react ant table设置动态scroll,且某些列的长度固定
设置scroll x的值为列的个数*100。原创 2023-06-27 16:18:39 · 916 阅读 · 0 评论 -
react map绑定动态ref获取子组件的实例cuurent为空
父组件动态加载了多个子组件,想在父组件点击确定的时候同时获取全部子组件的值。原创 2023-06-12 16:08:44 · 615 阅读 · 0 评论 -
ant Modal 上的EditableProTable编辑数据后,再次打开弹窗数据依然还在
实际上关闭弹窗,子组件是一直没有销毁的,也就是EditableProTable 输入框 会一直保存其状态,当然也包括它的数据,所以为了完全销毁组件可以modal上加个属性,也可以给modal加个key,每次打开的时换一个不同的key。打开弹窗后,编辑表格中的数据,关闭弹窗,再打开弹窗发现输入框的数据还在。即使执行了以下的重置操作,数据也还在。原创 2023-05-26 17:21:43 · 640 阅读 · 0 评论 -
react ice 打包失败
可以看到图片路径找不到,但是实际上项目的图片路径是对的,复制地址可以打开图片,那是哪里的问题呢,其实这里粗心了,项目路径有中文导致打包时无法正确找到对应文件,把不良品这个中文换成英文就可以了。原创 2023-05-09 10:13:13 · 142 阅读 · 0 评论 -
react ice3 配置postcss-pxtorem
【代码】react ice3 配置postcss-pxtorem。原创 2023-04-28 17:28:46 · 382 阅读 · 0 评论 -
react表单多个下拉调用接口,有些下拉没有渲染数据
在表单页面中点击新增按钮,触发弹窗,弹窗中是一个表单,有2个下拉,每个下拉的数据都需要通过接口获取,实际使用中发现有多个下拉已经调用了接口,但是数据并没有渲染上去。原创 2023-02-28 09:12:49 · 265 阅读 · 0 评论 -
跨窗口调试时,怎么在跳转时就打开控制台
比如我在a网站跳转b网站时想要调试b网站的代码,跳转的时候我们想查看跳转的参数以及其它的操作,但是我们是无法在b网页马上打开控制台的,这个时候就有个小技巧了,可以在b网站初始执行的时候加个。,来阻止b网站的运行。然后b网站定住,可以打开控制台了调试了。原创 2023-02-07 10:09:02 · 500 阅读 · 0 评论 -
js查找数组的重复项和对应的下标
处理逻辑,每一项都跟后面的每一项进行对比,所以是要遍历2次的。原创 2023-01-13 10:16:16 · 1397 阅读 · 0 评论 -
ant react design select不支持搜索
搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索。若通过 options 属性配置选项内容,建议设置 optionFilterProp=“label” 来对内容进行搜索。原创 2023-01-05 09:52:45 · 365 阅读 · 0 评论 -
ant design select 搜索同时支持输入和下拉选中
1. 远程搜索的时候,有数据返回,但是下拉展示的仍然是无数据。。。2. 搜索输入框正常情况下只支持下拉选中,如果输入的内容查不到,那么在失去焦点的时候就置空输入框了,也就是没法保持输原创 2022-12-08 16:13:05 · 4737 阅读 · 2 评论 -
ant design protable的页码pagination点击一直显示第一页
另外一个方案是,你可以在表格搜索的时候获取表格页码,再把当前的页码数据set到table的config中。如果之前页面一直没有问题,现在突然发现页码点击无效果了,需要注意是是不是执行过。(package.json中),那么更新依赖后它的版本可能变成了。(package.lock.json中),这是因为。,然后在执行npm install,再把。的版本更新了,例如:原来的版本是。表示向上拉最新的版本。原创 2022-12-08 15:30:35 · 1327 阅读 · 0 评论 -
ant-pro protable 选中一行时,结果视图选中了所有
当rowKey对应的id 在列表中没有返回,或者不是唯一的,就会出现选中一行,结果视图上选中了多行,此时,只需要把rowKey对应的id改成后端返回的列表数据中的唯一id项就可以了。原创 2022-11-28 16:24:22 · 853 阅读 · 0 评论 -
Antd中Select组件中的defaultValue设置不生效
在Select 组件中添加一个key, 值为你所需要的 defaultValue,注意是在。原创 2022-11-26 10:42:35 · 1408 阅读 · 1 评论 -
react ice 路由跳转后没有渲染页面
看了下在useEffect中返回了false,把return false去掉,换成了return {}页面a跳转到页面b的时候,页面b报错,并且没有渲染出来。原创 2022-11-18 15:33:09 · 488 阅读 · 0 评论 -
Cannot update during an existing state transition (such as within `render`). Render methods should
react uni的项目中,列表中引入了一个子组件modal,点击展示modal的时候就报这个错。set赋值操作需要在useEffect 中执行。渲染方法应该纯粹是props和state的函数。在现有状态转换期间(例如在。原创 2022-10-25 15:33:08 · 3967 阅读 · 0 评论 -
前端知识体系(7)-react篇
React是一个简单的javascript UI库,用于构建高效、快速的用户界面。它是一个轻量级库,因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。声明式编程是一种编程范式,它关注的是你要做什么,而不是如何做。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等HTML file// HTML。原创 2022-10-25 11:06:25 · 569 阅读 · 0 评论 -
js代码简写
【代码】js代码简写。原创 2022-10-21 12:05:24 · 84 阅读 · 0 评论 -
ant日历组件calendar转中文以及消息渲染
这里加入了完整的日历消息展示,消息从接口中获得,返回的是日历面板上每一天的消息信息,然后展示在日历中,如果只是需要转中文,则只需要看转中文的几个方法。最终的效果,可以直接在每天卡片上显示消息,也可以悬浮显示每天的消息。目前使用的项目用的是ice+ant+react ,项目中使用了calendar组件,但是组件中的星期,年份,月份都是英文的,按照官网的配置了转中文没有起作用。由于官网的配置没有生效,所以使用了一个最直接的方案:直接替换英文的dom节点的内容为中文的。原创 2022-09-30 14:56:04 · 1495 阅读 · 0 评论 -
ant组件库 message组件只响应了一次就失效了
但是只在第一个接口失败的时候触发了,第二个接口失败没有响应提示信息,后续的其它的提示error,info,warning,success都失效了。是一个对象,导致出错阻塞了后面message的触发。奇怪的是控制台并没有显示错误信息。,所以这个坑很容易被忽略掉。页面有3个接口请求,每次请求失败都会。中的err全部转成字符串的格式。排查代码,发现第二次使用。原创 2022-09-30 08:59:32 · 1234 阅读 · 0 评论 -
react 横向/水平无限消息滚动
效果如图:创建1个文件夹,里面存放两个文件,index.tsx和style.less:原理是就设置一个固定长度的父节点,然后消息内容的长度超过了父节点的长度,就会出现滚动条,这个时候设置一个定时器,让子节点即消息内容,一步步的向左边滚动,当向左边滚动完成以后马上需要回到原始位置,再重新滚动。原创 2022-09-27 14:40:52 · 2267 阅读 · 1 评论 -
react ice 不兼容火狐低版本浏览器
目前使用的是ice结合ant来开发的react项目,但是运行后在谷歌浏览器和ice浏览器没有问题,但是在火狐的低版本(2016之前的版本,基本是在版本号50以下的)上运行打开页面显示一片空白,并且没有任何的错误提示。一开始分析是不是react版本过高导致不兼容,后来查看老项目,发现react16照样可以在火狐50运行,于是排除了react的问题。现在页面可以打开了但是接口返回的是一个xml对象,并不是json对象。查看ice的配置,发现默认是使用了vite,于是在。原创 2022-09-27 09:56:32 · 967 阅读 · 0 评论 -
react antv(Ant Design Charts)怎么使用图表事件
【代码】react antv(Ant Design Charts)怎么使用图表事件。原创 2022-09-08 15:26:56 · 1819 阅读 · 1 评论 -
react ant table 表格合并单元格
将行数据中公司名相同的数据进行合并。原创 2022-09-07 13:50:49 · 507 阅读 · 0 评论 -
react set值会导致表单重置而清空数据
当输入完姓名的时候,需要把输入的姓名添加到关联对象的下拉框中供用户选择。但是输入姓名后,将值set到关联对象后,表单直接就清空了。在set后会自动清空表单,所有我们可以通过异步来恢复表单数据。原创 2022-09-02 11:30:15 · 746 阅读 · 0 评论 -
ant pro-table点击表格行高亮显示
直接在onRow事件中,捕捉到当前的节点,然后设置它高亮,然后再设置其它行的节点恢复默认样式。原创 2022-08-23 14:16:29 · 806 阅读 · 1 评论 -
git 更换文件名大小写无法提交 远程和本地不一致
这样下次提交的时候就会观察到本地和远程不一致的文件名和文件夹的名字。3、再将文件恢复,再次提交到git即可。2、删除对应文件并提交到git。1、先将要提交的文件备份。原创 2022-08-04 10:17:13 · 1282 阅读 · 0 评论 -
react项目切换窗口就会自动调用接口
问题:目前的项目使用的是++,在做一个表格页面的时候使用了组件,使用后发现,从其它窗口切换到本项目所在的窗口就会自动调用接口。原因:默认设置了一个属性:所以要解决这个问题,就需要手动配置这个属性值为...原创 2022-08-04 10:12:42 · 577 阅读 · 0 评论 -
react的form动态校验rules 点击下拉就会清空表单
直接动态替换rules会导致form组件重置,如果要动态校验,应该在事件中根据条件执行不同的逻辑。原创 2022-07-22 17:50:45 · 1058 阅读 · 0 评论 -
react ant protable 点击排序会自动调用接口
reactantprotable点击排序会自动调用接口,这个是ui库自带的,无法去除,因为无法判断事件来源是点击排序还是查询。原创 2022-07-22 17:44:41 · 462 阅读 · 0 评论 -
react ant protable 点击排序会自动调用接口
reactantprotable点击排序会自动调用接口,这个是ui库自带的,无法去除,因为无法判断事件来源是点击排序还是查询。原创 2022-07-21 19:03:18 · 418 阅读 · 0 评论 -
react protable ant设置表单查询条件
从a页面跳转到b页面,路由携带了参数,并且将参数作为b页面的查询条件,同时b页面对应的搜索表单也需要根据查询值来选中。设置initialValue在静态的情况下没问题,但动态设置时不生效。原创 2022-07-18 11:45:50 · 1574 阅读 · 0 评论