- 博客(535)
- 收藏
- 关注
RSS订阅原创 React+MapBox GL JS引入URL服务地址实现自定义图标标记地点、区域绘制功能
本文介绍了如何在React中使用Mapbox GL JS实现自定义图标配置。通过customIcons对象定义不同类型的图标URL，支持机房、基站和断点使用不同图标标记。addCustomMarker函数用于创建带有自定义图标的标记，支持设置图标URL、标题和CSS类。专用函数addComputerRoomMarkers、addBaseStationMarkers和addBreakPointMarkers分别用于添加机房、基站和断点标记。图标样式通过CSS控制，大小为32x32像素，使用background
2025-05-23 14:51:56
530
原创 Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For in
Ant Design 表单组件 Form.Item 在使用 name 属性时，必须包裹一个单一的子元素，否则会触发控制台警告。例如，<Form.Item name="username"><Input /><span>1111</span></Form.Item> 会导致警告，因为 Form.Item 包含了多个子元素。虽然可以使用 <></> 包裹多个元素，但这可能导致表单元素 Input 不受控。为了解决这个问题，可以通过 useState 为 Input 绑定 value 并设置 onChange 事件
2025-05-23 11:54:56
159
原创 React antd连续修改表格行数据再次回填表单内容时，数据不是最新的问题的解决
在使用Ant Design Table时，若遇到编辑表单保存后再次点击修改按钮时，表单回填内容未更新的问题，可以通过优化数据传递方式解决。具体方法是在父组件向子组件传递行数据时，不使用useState变量selectedRows，而是通过修改成功后查询获得的列表数据，并过滤selectedRowKeys来获取最新数据。例如：<AddEditForm selectedRow={selectedRows.length > 0 ? data.find(item => item.id === se
2025-05-23 11:33:36
121
原创 react+Mapbox GL实现标记地点、区域的功能
本文介绍了如何在React项目中使用Mapbox GL JS创建交互式地图。首先，确保已注册Mapbox账号并获取访问令牌，然后安装必要的依赖。接着，创建基础地图组件，设置地图的中心点、缩放级别，并监听地图移动事件以更新经纬度和缩放级别。随后，通过mapboxgl.Marker添加点标记，并使用GeoJSON数据绘制多边形区域。文章还展示了如何为多边形添加点击事件和鼠标悬停效果，并提供了完整的组件示例，结合了标记地点和绘制区域的功能。最后，介绍了如何使用react-map-gl官方React封装实现类似功能
2025-05-23 11:11:53
538
原创 React 轻量级富文本编辑器推荐（中文版）
专为 Markdown 设计，适合技术写作。：由国内团队开发，专为中文优化。：功能齐全，中文文档丰富。（Markdown专用）+ 自定义中文语言包。
2025-05-15 17:48:15
931
原创 js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡
js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡。
2025-04-22 10:02:01
329
原创 AI语音助手 React 组件使用js-audio-recorder实现，将获取到的语音转成base64发送给后端，后端接口返回文本内容
【代码】语音助手 React 组件使用js-audio-recorder实现，将获取到的语音转成base64发送给后端，后端接口返回文本内容。
2025-04-18 15:04:42
490
原创 echarts饼图中心呈现一张图片，并且能动态旋转的效果react组件
【代码】echarts饼图中心呈现一张图片，并且能动态旋转的效果react组件。
2025-04-18 14:55:56
520
原创 Echarts环形图饼图实现圆环中间有一条弧线，鼠标悬停在圆环某一段上面的时候呈现加粗效果
【代码】Echarts环形图饼图实现圆环中间有一条弧线，鼠标悬停在圆环某一段上面的时候呈现加粗效果。
2025-04-09 10:05:04
209
原创 react实现SVG地图区域中心点呈现圆柱体，不同区域数据不同，圆柱体高度不同
【代码】react实现SVG地图区域中心点呈现圆柱体，不同区域数据不同，圆柱体高度不同。
2025-04-08 13:21:34
276
原创 react ant design树穿梭框实现搜索并展开到子节点、同级节点选择及同时选择数量限制功能
【代码】react ant design树穿梭框实现搜索并展开到子节点、同级节点选择及同时选择数量限制功能。
2025-03-25 10:33:23
438
原创 将一个数组对象按照某个字段分组，组装成antd Tree数据结构
代码通过遍历原始数据，使用一个对象 map 来按 fieldId 分组，并为每个组创建一个包含 key、title 和 children 属性的对象。然后，将每个技能的 skillsId 和 skillsName 添加到相应组的 children 数组中。最后，使用 Object.values() 方法将 map 对象转换为一个数组，得到所需的树结构数据。
2025-02-17 17:33:09
297
原创 Ant Design Table实现ScrollBoard组件的轮播表效果，无缝轮播
需求：使用的时候，文本内容较长时，设置溢出隐藏，完整的文本内容通过span的title属性来设置，想要使用ant design tooltip文本提示的样式来呈现完整的文本内容，使用DataV-React无法满足要求，改成通过结合 setInterval 和 Table 的 scroll 属性来实现类似 ScrollBoard 的轮播效果。
2025-02-17 13:52:33
656
原创 react页面定时器调用一组多个接口，如果接口请求返回令牌失效，清除定时器不再触发这一组请求
在这个例子中，fetchDataGroup 函数会发起一组API请求，并使用Promise.all等待所有请求完成。对于生产环境的应用，应该考虑通过更安全的方式管理访问令牌，例如从环境变量加载或者使用身份验证库来自动刷新令牌。3. 错误处理：在API调用中加入错误处理逻辑，特别是针对401未授权的状态码（通常意味着令牌已失效）。如果应用有刷新令牌的能力，可以在handleTokenInvalid中尝试刷新令牌而不是直接清除定时器。4. 清理定时器：当检测到令牌失效时，清除定时器并停止进一步的API调用。
2025-01-24 13:40:10
603
原创 react项目表格内容轮播，DataV-React轮播表的使用
项目中想要实现表格表头固定不动，表格行内容轮播呈现的效果，antd中的table无法实现，使用DataV-React轮播表来实现。1）样式文件中使用:global{}包裹元素选择器，设置样式。
2025-01-24 13:34:05
830
原创 antd日期时间选择datepicker使用两个分别作为开始时间、结束时间，设置禁用日期和时间点
请注意，在上面的代码中，假设正在使用 moment.js 进行日期处理。功能要求：使用两个antd日期时间选择datepicker分别作为开始时间、结束时间，开始时间的禁用日期设置为今天的前一天，禁用时间设置为今天当前时间点之前的时间，结束时间不能早于开始时间。1. 设置开始时间DatePicker的规则，禁用今天前一天及之前的所有日期，并且禁用今天当前时间点之前的时间，如果选择的日期是今天之后的日期，时间点不做禁用限制。2. 设置结束时间 DatePicker 的规则，结束时间不能早于开始时间。
2025-01-23 17:37:52
708
原创 antd datepicker禁用日期设置为今天的前一天，禁用时间设置为当前时间点之前的时间
如果使用的是最新的 antd 版本，它可能内置支持 ES6 Date 对象，因此可能不需要使用 moment.js。在使用 Ant Design (antd) 的 DatePicker 组件时，可以通过 disabledDate 和 showTime 的 disabledHours, disabledMinutes, disabledSeconds 属性来禁用特定的日期和时间。为了禁用今天的前一天及之前的所有日期，需要比较 current 和今天的日期。需要根据当前时间动态地设置这些属性。
2025-01-23 11:00:13
475
原创 flex横向布局超出部分滚动，使用Flexbox布局时，内容超出容器宽度时，容器内部出现横向滚动条而不是压缩子元素
上述代码中，.flex-container是包含所有.flex-item的父容器。每个.flex-item都有固定的宽度，并且不会因为容器空间不足而收缩。如果所有子项的总宽度超出了父容器的宽度，用户可以通过水平滚动来查看所有的子项。2. 为了确保父容器不会压缩子元素，需要给子元素设置flex-shrink: 0;3. 给父容器添加overflow-x: auto;属性，这样当内容超出父容器的宽度时，会显示一个水平滚动条。4. 如果不想让垂直方向也出现滚动条，可以加上overflow-y: hidden;
2025-01-23 10:57:29
965
原创 react项目引入字体文件失败：Failed to decode downloaded font
3）打包后，public目录下的字体文件作为静态资源存在，部署到服务器上之后，发现字体引入失效，控制台提示的download路径为：http://ip/fonts/……2）src中url路径不添加public，直接使用/即表示在public目录下，项目中加上/public的别名~@public之后，有时字体文件引入会失效，直接使用上述代码的/fonts/。react项目中引入字体文件，本地启动时，有时候生效，有时候失败，控制台提示：Failed to decode downloaded font。
2025-01-23 10:51:36
895
原创 react引入DingTalk-JinBuTi字体
在项目中创建一个新的CSS文件（如dingtalk-fonts.css），或者编辑现有的全局样式文件。如果DingTalk-JinBuTi字体不是通过npm或yarn可直接安装的包，则需要从官方渠道下载字体文件。如果DingTalk-JinBuTi字体是通过NPM或其他包管理工具提供的，并且它附带了可以直接使用的CSS文件或组件，那么可以直接安装该包并遵循其提供的集成指南。下载后，把字体文件放置在React项目的合适位置，例如public/fonts/或者src/assets/fonts/目录下。
2025-01-23 10:27:55
1101
原创 react antd点击table单元格文字下载指定的excel路径
2. 定义表格列配置：在定义 antd Table 组件的 columns 属性时，为特定的列设置 render 方法，该方法返回一个带有点击事件处理程序的 React 元素。在这个例子中，当用户点击 "Name" 列中的文本时，会调用 handleDownload 函数，它将根据提供的 URL 创建一个链接并触发下载。1. 确保有一个可供下载的 Excel 文件：需要有一个服务器端点或者一个可以直接访问的 URL，指向想要用户下载的 Excel 文件。
2025-01-23 10:19:36
705
原创 前端react后端java实现提交antd form表单成功即导出压缩包
请注意，上述代码片段是简化版的示例，实际应用中可能需要更复杂的逻辑来处理错误、验证以及确保安全性。如果需要压缩多个文件或目录，或者有更复杂的需求，则可能需要引入其他库或工具来辅助完成任务。首先，需要添加必要的依赖项到pom.xml中，例如commons-compress用于创建ZIP文件。2. 处理表单提交：在onFinish回调中发起请求到后端API，并处理响应。1. 接收表单数据：创建一个REST控制器来接收前端发送的表单数据。2. 生成压缩包：根据接收到的数据生成压缩包。
2025-01-23 10:17:01
631
原创 无法访问com.zaxxer.hikari.HikariDataSource类文件具有错误的版本 55.0, 应为 52
2.使用兼容版本的 HikariCP：如果希望继续使用 JDK 8，可以下载HikariCP 3.x。1. 升级 JDK到版本 11 或更高版本。
2024-12-18 11:15:58
521
原创 DBeaver连接数据库时出现Public Key Retrieval is not allowed错误
在连接方式那里选中URL，拼接上?allowPublicKeyRetrieval=true，测试连接成功。
2024-12-16 17:00:59
256
原创 echarts树图二级子节点分别有几千个三级子节点 设置默认展开5个子节点及一个展开更多子节点 点击展开更多子节点时再追加展示固定数量的子节点
【代码】echarts树图二级子节点分别有几千个三级子节点 设置默认展开5个子节点及一个展开更多子节点 点击展开更多子节点时再追加展示固定数量的子节点。
2024-12-10 16:35:00
307
原创 yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。点击“新建”，然后添加 Yarn 的安装路径（例如 C:\Users\YourUsername\AppData\Roaming\npm）。关闭并重新打开一个新的终端或命令提示符窗口，然后再次尝试运行 yarn -v 命令，看看是否能够成功显示 Yarn 的版本号。打开“控制面板” -> “系统和安全” -> “系统” -> “高级系统设置”。在“系统变量”部分，找到名为 Path 的变量，然后点击“编辑”。打开VS Code，以管理员身份运行。
2024-12-03 15:02:01
4152
原创 react antd不在form表单中提交表单数据，而是点查询按钮时才将form表单数据和其他查询条件一起触发一次查询，避免重复触发请求
也可以采用useEffect依赖项触发请求，在useEffect中判断form表单填充是否有内容，有内容时限制要传的表单参数state对象为''时不触发查询，同时判断当前表单填充内容与要传的表单参数state对象是否相等，相等时再触发查询。
2024-12-03 11:21:35
451
原创 idea创建springboot项目JDK和java版本不匹配，java版本只能选择17，21，23
idea创建springboot项目JDK和java版本不匹配，java版本只能选择17，21，23
2024-11-25 16:11:34
1122
原创 antd从数组动态生成Checkbox组，勾选一个影响另外一个，去掉勾选后再次勾选无法选中
给外层的Drawer抽屉增加的destroyOnClose属性，关闭时销毁 Drawer 里的子元素。2.去掉勾选后再次勾选无法再次选中。1.勾选一个会影响道另外一个；
2024-11-18 15:16:29
183
原创 git没有识别出大写字母改成小写重命名的文件目录
Git 默认不会跟踪大写字母和小写字母的区别，因为在大多数文件系统中，大写字母和小写字母被认为是相同的文件，只有在区分大小写的文件系统中（如 macOS 的 HFS+ 或 Windows 的 NTFS），这才是一个问题。如果重命名了一个目录，并且这个重命名涉及到大写字母到小写字母的转换，Git 可能会认为这只是一个名字的改变，而不是一个重命名。为了让 Git 识别出这是一个重命名，需要使用 git mv 命令来重命名目录。这个命令会让 Git 识别出这是一个重命名操作，并正确跟踪这次改动。
2024-11-14 16:01:02
680
原创 js将一个扁平化的数组转换为一个echarts多级树结构的对象
实际项目中自定义了节点图标，导致分辨不出来哪些节点是有子节点的，在series对象中设置initialTreeDepth: -1 表示默认展开所有节点即可。js将一个扁平化的数组转换为一个echarts多级树结构的对象。
2024-11-14 13:22:14
425
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人