- 博客(243)
- 资源 (3)
- 问答 (5)
- 收藏
- 关注
RSS订阅原创 react实现一个列表的拖拽排序(react实现拖拽)
比较流行的有react-beautiful-dnd和dnd-kit，可能还有react-sortable-hoc，不过这个好像已经不再维护了。我的项目里使用了antd，antd表格有一个示例还是挺像的，本来我想用Table实现，它自带拖拽。这个作者最后推荐了dnd-kit所以我最后选择了这个库，但其实我这个需求用react-beautiful-dnd 也能实现。您还需要确保安装了对等依赖项。这里有两个版本，我不想用immutability-helper库，觉得多一个依赖没啥意义，所以我去掉了。
2025-03-12 09:27:08
1235
原创 antd Dropdown组件使用时报错：React.Children.only expected to receive a single React element child
当我在项目里使用 antd的Dropdown组件时出现的问题，我使用官网的例子，页面可以正常渲染，但当我鼠标放到Dropdown 上就页面崩溃，报了这个错。这个错的意思是Children.only只期望接收一个React元素子元素，从开发者工具看是 antd内部的错误。我的版本是 4.10.0，应该用下面这种写法！
2025-02-20 14:37:28
430
原创 Fullcalendar @fullcalendar/react 样式错乱丢失问题和导致页面卡顿崩溃问题
我的场景很特殊，大部分人都不会遇到，我只是做个笔记，记录一下。我的场景里即：切换到 一个iframe页面时，再切换回来日历的样式丢失了！不仅丢失了样式还导致页面崩溃了，怎么点击都没反应。最终都是由于!styleEl ||!styleEl.isConnected 这个条件不满足，导致的，所以解决方案就是 注释掉这个判断。具体原因，后面我会研究一下再补充。
2025-01-23 13:46:15
1080
原创 qiankun报：TypeError: parcel ‘react16‘ died in status SKIP_BECAUSE_BROKEN: Illegal invocation
github 官网的 master 分支官网的示例，使用 loadMicroApp 手动加载 react16 会报：TypeError: parcel ‘react16’ died in status SKIP_BECAUSE_BROKEN: Illegal invocationgithub qiankun examples 我去 github issues 里找到了解决方案：3.0 的 demo 切换应用（react16）报错 Illegal invocation #2951clone 下的 ex
2025-01-08 16:26:54
434
原创 react使用Fullcalendar 实战用法
我直接用的@fullcalendar/react 因为我的和它基本功能完全一致。卡片式的日历，其实我是推荐 antd的，我两个都写了一下都能实现。它需要处理的东西很多，点击上个月的日期时，需要自己跳到上一个月。
2024-11-01 17:26:56
780
原创 husky@^3.0.9 run install node husky install error: Error: Command failed with exit code 1:node husky
这是一种很常见的问题，其他库也可能出现这种问题。只需要把husky换成对应的库即可。
2024-10-22 16:09:17
760
原创 react里实现左右拉伸实战
这里我用的是style Module 如果你不用这个请自行转换语法。只需要把resizeBox.tsx里的styles.去掉。并且直接引入less即可。这里使用了flex巧妙的实现了这个效果，左边div设置一个宽度，右边的flex:1即可。上下设置height，且 flex-direction:column 设置纵向布局。其他用法可以自行拓展组件和嵌套resizeBox组件使用。我只是提供一个思路。鼠标放到蓝色的线上即可拖动。
2024-10-18 15:28:46
658
原创 qiankun(乾坤)解决父子应用样式的影响和策略
qiankun 官网qiankun(乾坤)微应用框架。可以让很多应用集成到一个项目里来。但集成时样式隔离是个很大的问题（坑）。官网也给出了一些解决方案。无界官网为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。
2024-10-08 15:23:43
1830
原创 qainkun 子应用更新，但是访问主应用时显示的还是旧的内容
使用qiankun时，子应用只改了一个页面里很细微的东西。比如：只改了一个文字等等。访问主应用时却还是旧的页面。清除浏览器缓存才刷新过来。即使我子应用打包时文件都有了 动态的hash生成也会出现这种问题。qiankun 微应用文件更新之后，访问的还是旧版文件。
2024-10-08 15:21:20
988
原创 ag-grid 表格 筛选浮框背景色透明（.ag-menu 背景色不生效）
经过审查元素发现 --ag-menu-background-color 这个css变量不生效。下图 红色的框圈起来的部分。值得一提的是CSS Variables这个已经有很多库都在用了，比如 antd 的 v5版本等等。我在使用ag-grid时表格头筛选功能，弹出的浮窗，背景色透明问题。只需要 用全局样式覆盖.ag-menu 的background-color即可。火狐浏览器 （大于 100.x 应该没问题，130.0.1 这个没问题）chrome 几乎没问题（太低的没试过 >90.x应该没问题）
2024-09-25 16:24:56
379
原创 神策埋点 sensorsdata.es6.min.js、sensorsdata.min.js 触发eslint 语法检查，导致打包不成功
在使用神策埋点时，下载的web js sdk，打包时eslint 语法检查，会导致打包不成功。npm start没问题。
2024-08-29 15:33:50
673
1
原创 create-react-app 移除 ESLint 语法检查
总之，ESLint 是一个强大的工具，可以帮助开发者提高代码质量和一致性，是现代 JavaScript/TypeScript 开发过程中不可或缺的部分。虽然这不是完全关闭 ESLint，但如果您只想在某些文件或行上禁用 ESLint 检查，可以添加特定的注释。1.代码风格检查：ESLint 可以检查代码是否符合特定的编码风格，例如缩进、空格、引号类型等，帮助团队保持一致的代码风格。3.自定义规则：ESLint 允许开发者根据项目需要定义和配置规则，可以启用或禁用特定的检查规则，以满足团队的编码标准。
2024-08-29 15:31:03
516
原创 ag-grid enableCellChangeFlash属性不生效（单元格内容变化，动画提示效果）
ag-grid enableCellChangeFlash属性不生效（单元格内容变化，动画提示效果）
2024-08-26 08:58:54
1060
原创 vs-code 提示：此应用无法在你的电脑上运行，若需要找到适用于你的电脑的版本，请咨询软件发布者。
建议 备份一下extensions.json，重新安装完后，按照json里的插件重新安装一下，防止插件丢失。我昨天使用，vs code时一打开就提示“此应用无法在你的电脑上运行，若需要找到适用于你的电脑的版本，请咨询软件发布者”，一编辑代码也提示，关掉弹窗只要，编辑代码还会提示。**我网上找了好多方案，都不行，包括设置兼容性，甚至我卸载了重装也不行，下载旧版本的也不行。最后我想起来了可能是没有卸载干净，因为 每次卸载打开，我的插件还在。删除完成后，重新下载 安装包，安装即可，就没有这个问题了!
2024-08-20 10:47:15
3441
4
原创 ag-grid 边框和图标不显示
在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2724d7d874894ae597438e8e485c81c3.png。使用 ag-grid时 有的用户端边框不显示，有的显示。经过排查是浏览器版本过低的原因。升级浏览器版本即可 最好 是最近两年的版本 90.x 以上。最近在用ag-grid，使用 时遇到了一些问题，特此记录一下。边框和 可以拉伸的图标都没显示 （红色圈起来的）
2024-08-19 10:32:14
483
原创 js 实现对一个元素得拉伸
最近写一个项目遇到了需要拉伸调整一个元素得大小（宽高）。所以打算实现一下。思路就是用 mousedown、mousemove、mouseup 来实现。mousemove是动态获取坐标，然后 动态改变元素宽度这种功能建议使用 成熟的库来实现，兼容性什么的一般都会适配。
2024-08-19 10:30:49
1103
原创 ag-grid 报错: Failed to execute ‘querySelectorAll‘ on ‘Element‘: ‘.xxx‘ is not a valid selector
最近在用ag-grid，使用 sideBar 时遇到了一些问题，特此记录一下。ag-grid 官网ag-grid 用了很多新的技术，所以它对浏览器版本相对要求高，如果遇到 问题可以先去 issues里查一下。然后升级 版本试试。
2024-08-19 10:30:09
941
原创 qiankun 实现父子应用通信
最近有一个项目在实现微服务，把几个独立的项目集成一个项目里，选择了qiankun技术栈。qinakun 官网 使用指南使用时遇到了 主应用（父），子应用之间需要传递消息。特此记录一下。
2024-05-17 11:22:14
2060
原创 antd DatePicker throws error “cannot be used as a JSX component“ DatePicker抛出错误“不能用作JSX组件”
DatePicker throws error "cannot be used as a JSX component" DatePicker抛出错误“不能用作JSX组件”
2024-03-06 10:00:00
1344
原创 react 实现页面状态缓存（keep-alive）
因为 react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个 页面我滑倒了中间，然后跳转到 详情页然后 返回，之前的页面刷新了，回到顶部了肯定不行（搜索条件之类的消失了，滚动条回到顶部了）！比如：pc端项目后台管理项目里点击时 打开一个页签，页签切换，状态页会丢失。每次切换页签都重新请求了接口。
2024-01-22 10:15:00
11529
原创 react、vue移动端项目使用技术
现在移动端项目越来越多，h5项目需求量也很大。所以有必要总结一下，h5 移动段使用到的技术。一般 h5可以在微信、内嵌app（webview）、小程序（webview）等等只要有浏览器环境都能运行。具体使用方式可以参考 我 create-react-app 专栏里的文章(仅限 react)。不过 vue页大差不差。其实 如果你的页面要求 缓存状态 可以优先选择 vue。react需要自己用第三方插件 实现，不过 react 18有个中的官方实现 也可以实现。
2024-01-22 10:00:00
2532
原创 create-react-app 打包去掉 map文件
在使用 create-react-app 创建的React应用中，默认情况下会生成带有.map文件的打包文件，这些.map文件包含了源代码和调试信息，用于开发和调试过程中进行错误跟踪。然而，在生产环境中，这些.map文件通常是不必要的，因为它们会增加打包文件的大小，而且不会被浏览器使用。默认的打包文件目录截图：map文件很大，部署到生产复制有些不合适，虽然，不影响加载速度，但是占磁盘空间。配置完后需要重新 npm run build!总的来说 方法三最方便。
2023-12-20 15:53:33
5805
原创 react 使用环境变量的方法和步骤（dotenv-cli 实现使用环境变量步骤）
react 使用环境变量的方法和步骤（dotenv-cli 实现使用环境变量步骤）
2023-12-11 10:00:00
6332
1
原创 react-router v6实现动态的title(react-router-dom v6)
react-router v6实现动态的title(react-router-dom v6)
2023-12-05 20:41:37
6155
原创 React中StrictMode严格模式，导致开发环境，接口会请求两次或多次（ useEffect 请求多次）
我在首页 useEffect里 请求一个接口，整个页面就在这里请求这一次接口。但 实际上请求了两次。我检查了代码，确定只调用了一次，且我这个页面就是父组件。也就是说，你也可以 不做处理，如果你觉得开发环境请求两次不能接受，可以注释掉 index.js或者 App.js里的严格模式注释掉。我在用 create-react-app时，开发环境，一进页面接口会请求两次或多次。
2023-11-20 10:48:54
5629
4
原创 input 输入中文，高频触发 onchange和oninput事件（CompositionEvent API解决）
input 输入中文，高频触发 onchange和oninput事件（CompositionEvent API解决）
2023-10-27 13:44:40
5295
原创 create-react-app v5 打包配置(部署到非根目录)
publicPath: 用于指定构建后静态资源在服务器上的路径。base: 用于指定应用程序的根路径，以确保路由可以正确匹配到对应页面。这两个配置项在部署到非根目录时很重要，可以确保应用的资源和路由正常加载和导航。
2023-10-24 10:36:17
4060
原创 React create-react-app 里配置代理（解决跨域）
其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。修改时需要 npm start重新运行一下，要不然可能不生效。proxy只能以 http:// 或https://开头 否则会报：示例：比如后端给的完整地址如下：这一段是相同的地址（也就是所有接口都是这个前缀），根据你的接口来定。然后使用即可 比如 axios url直接请求就行代码如下：request就是axios 只是我又封装了一层。
2023-10-17 11:13:29
3650
原创 react create-react-app v5配置 px2rem （不暴露 eject方式）
react create-react-app v5配置 px2rem （不暴露 eject方式）
2023-10-09 18:49:36
4424
3
原创 react create-react-app v5 从零搭建（使用 npm run eject）
好久没用 create-react-app做项目了，这次为了个h5项目，就几个页面，决定自己搭建一个（ps:mmp 好久没用，搭建的时候遇到一堆问题）。我之前都是使用 umi。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西，开箱即用。
2023-09-28 11:21:05
4240
原创 react create-react-app v5配置 px2rem （暴露 eject方式）
react create-react-app v5配置 px2rem （暴露 eject方式）
2023-09-28 11:18:31
2328
原创 react create-react-app v5 从零搭建项目（不暴露 eject）
好久没用 create-react-app做项目了，这次为了个h5项目，就几个页面，决定自己搭建一个（ps:mmp 好久没用，搭建的时候遇到一堆问题）。我之前都是使用 umi。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西，开箱即用。我的环境如下：v5版本 好多问题，有很多 问题，有些插件 里的办法也不适配了（坑很多，很多 time:2023-09-27）。
2023-09-27 15:37:28
3001
1
原创 react create-react-app v5 配置路由(报错及注意事项)
react create-react-app 配置路由报错(Uncaught TypeError: Cannot read properties of null (reading 'useRef'))
2023-09-27 09:20:33
1682
额这个csdn怎么突然多了这么多粉丝，而且全是只注册了一天的
2021-05-26
umi热更新可以监听到文件变化，不自动编译
2020-09-25
react样式加载hen'man
2019-11-27
Cesium图层管理，拖动图层改变图层层级（遮盖关系）
2019-10-22
dva.js怎么异步获取接口数据
2019-09-26
TA创建的收藏夹 TA关注的收藏夹
TA关注的人