- 博客(22)
- 收藏
- 关注
RSS订阅原创 第五章、菜单导航栏
本文介绍了三种实现水平导航菜单的React方案： 纯React+CSS方案：通过NavLink实现路由导航，使用CSS实现悬停显示子菜单效果，包含基础样式和交互逻辑。 Ant Design方案：利用Antd的Menu组件简化实现，通过配置items属性快速构建菜单，自带响应式交互效果。 增强版纯React方案：通过封装MenuItem组件，添加了延时关闭、箭头指示等交互增强功能，并优化了路由激活状态的判断逻辑。 三种方案各有特点，从基础实现到使用UI库再到自定义增强，逐步提升用户体验和功能完整性。开发者可根
2025-10-24 11:39:44
309
原创 第四章、路由配置
本文介绍了React项目中路由配置的完整实现方案。主要内容包括：1) 安装react-router-dom依赖；2) 推荐的项目目录结构；3) 基础路由配置方法，使用createBrowserRouter创建路由，包含公共布局、默认路由和嵌套路由；4) 动态路由参数获取；5) 导航与页面跳转的实现；6) 嵌套路由的Outlet使用；7) 路由懒加载优化方案，通过React.lazy和Suspense实现按需加载。文章提供了详实的代码示例，涵盖了从基础配置到高级优化的完整路由解决方案，适合React开发者参考
2025-10-24 11:37:20
633
原创 第三章、React项目国际化介绍（`react-i18next`）
这篇文章介绍了如何在React+TypeScript项目中使用react-i18next实现国际化。主要内容包括：安装相关依赖(i18next/react-i18next等)、推荐目录结构、i18n配置初始化、语言文件编写(中英文示例)、入口文件加载i18n、组件中使用翻译功能，以及实现语言切换组件。文章提供了完整的代码示例，从配置到使用全面覆盖了国际化实现的关键步骤，适合需要为React项目添加多语言支持的开发者参考。
2025-10-24 11:31:44
216
原创 第二章、全局配置项目主题色(主题切换+跟随系统)
本文介绍了在React+TypeScript项目中实现全局主题切换（暗黑/亮色模式）的推荐方案。主要内容包括： 采用CSS变量方案，通过切换data-theme属性动态改变样式 定义主题变量文件（dark.css/light.css）和全局样式 创建ThemeContext上下文管理主题状态 实现主题切换功能，并持久化到localStorage 支持跟随系统偏好主题设置 该方案无需重新渲染页面即可实现主题切换，性能良好且易于维护。核心思路是通过React状态管理结合CSS变量来实现动态主题效果，同时提供了完
2025-10-24 11:12:57
921
原创 第一章、React + TypeScript + Webpack项目构建
本文介绍了如何搭建一个基于React + TypeScript + Webpack的项目。首先通过npm初始化项目并安装React、Webpack、Babel等相关依赖。配置了TypeScript支持（tsconfig.json）和Babel转译设置（.babelrc）。重点讲解了Webpack配置的拆分方案：将公共配置、开发配置和生产配置分离，使用webpack-merge进行组合。开发环境配置了热更新等功能，生产环境则添加了代码压缩、CSS提取等优化。最后提供了HTML模板和目录结构参考，帮助开发者快速
2025-10-24 11:04:38
401
原创 【解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题】
本文介绍了React下拉菜单常见问题及优化方案。主要解决鼠标在父元素和子元素间移动时出现的菜单闪烁或无法展开问题，通过以下方法优化：1）使用延迟触发机制（200ms原则），在mouseLeave时设置延迟关闭，mouseEnter时清除定时器；2）关联子菜单事件处理，形成统一交互区域。同时提供了点击外部关闭菜单的实现方案，包括使用ref捕获菜单元素、添加全局点击监听器以及阻止菜单内部点击冒泡。这些优化确保了下拉菜单的流畅交互体验。
2025-09-10 11:02:53
441
原创 编辑器、代码块、大模型AI对话中代码复制功能实现及浏览器兼容处理
是一个浏览器 API，用于检查当前页面是否在安全上下文中运行。如果页面在安全上下文中运行（即通过。使用 useState 跟踪复制状态，提供视觉反馈。加载），则该函数返回true，否则返回false。2秒后自动重置复制状态提示。移除代码结尾的多余换行符。绝对定位到代码块右上角。确保复制内容格式正确。
2025-04-29 11:17:13
587
原创 如何优雅的处理动态地址栏参数，以及entries() 、fromEntries()和URLSearchParams.entries(）使用
类的实例，而不是普通的 JavaScript 对象，为了更方便像普通对象一样访问键值，我们需要将。类的实例），而不是普通的 JavaScript 对象。建议直接看MDN上URLSearchParams的实例方法。的键值对转换为普通对象，简化后续操作。
2025-04-29 09:57:37
832
原创 【Antv G6 血缘关系图下钻节点，节点展开收起功能，递归迭代问题处理】
在知识图谱的收起功能中，使用迭代方案避免栈溢出：突破调用栈深度限制，可处理任意深度的节点层级内存可控：显式管理待处理节点，避免不可预知的内存增长性能更优：减少函数调用开销，适合频繁的交互操作建议在类似树状结构遍历的场景中，优先考虑迭代方案以保证系统健壮性。递归仅推荐用于层级深度可控（如文件目录遍历）或代码简洁性优先的场景。
2025-04-27 16:35:21
1193
原创 js树形结构递归搜索
js树形结构递归搜索。根据name关键字搜索，如果节点的name能匹配上或者该节点的子节点的name能匹配上，就保留该节点以及该节点的父级节点，其他没有匹配上的过滤处理掉！
2025-04-16 17:50:51
234
原创 【webpack逐步构建React项目详细解析版】
构建React项目一般分为脚手架构建的方式和webpack逐步构建的方式，本期就是对webpack一步一步构建项目进行逐步详细讲解。
2025-01-10 11:43:08
469
原创 【关于Checkbox的checked及defaultChecked用户交互更新相关问题解决】
首先，只是组件初始化第一次的时候设置初始值，不会动态更新！其次checked设置值选中，要用state状态管理结合onChange方法才能实现用户交互（点击取消）的数据更新！
2024-11-29 14:50:15
469
原创 【Uncaught(in promise)TypeError:0bject.hasOwn is not a function 报错解决、polyfill 支持Object.hasOwn 低版本浏览器】
在项目开发完成后，进行版本测试过程中，更换了浏览器，遇到报错控制台：报错定位：报错由该项目中使用的插件导致，hasOwn是es2022新语法，旧浏览器不支持。提案方法 与 具有相同的行为。直接修改插件中的源码，相当于去修改了模块，你下次再时还是会被重新覆盖的，当然也可以去搜索如何优雅的修改中的代码而不被覆盖。但此方案，治标不治本。polyfill 支持在不支持的浏览器中，我们需要使用一些回退方式。我们利用 与 的相同行为实现支持方案：将此js文件放在项目入口文件index.js中，项目初始化时执
2024-09-11 17:29:03
1574
1
原创 【项目推荐——音频标注 Wavesurfer 用法及相关问题解决】
上期推荐了文本标注poplar-annotation用法，这期针对音视频标注推荐wavesurfer.js库；Wavesurfer.js 是一个基于Web Audio API 和HTML5 Canvas的开源音频可视化库，用于创建可交互、可定制的波形。同时拥有众多插件库。
2024-08-14 09:26:50
3326
1
原创 【项目推荐——文本标注 poplar-annotation 用法及相关问题解决】
是一款基于js的文本标注类库，支持react、vue框架，且与其框架版本没有关系，相对于库，需要依赖react 17以上版本，更有优势。
2024-07-08 19:08:20
1832
7
原创 ReactHook之forwardRef和useInperativeHandle
这样就可以接受ref作为第二个参数。不然就只有props这一个参数。如果你的函数组件想要接受别人传来的ref参数，就必须把函数组件用。直接通过将ref传参到函数子组件，报错！【注】: 类组件是不需要的，可以直接传。会把别人传给你的ref帮你传进来。控制台报错，说函数组件不能接受。，但是一个函数组件找不到这个。【案例】：聚焦文本输入框。
2024-06-07 11:01:41
678
1
原创 2024最全JavaScript基础、核心、进阶大全
JavaScript 是一种运行在客户端（浏览器）的编程语言ECMAScript( 基础语法 )、web APIs （DOM、BOM）（1）内部：写在里面（2）外部：引用外部js （3）内联：vue框架中4.变量计算机中用来存储数据的“容器”，简单理解是一个个的盒子。用来存放数据的。注意变量指的是容器而不是数据。4.2更新变量：变量赋值后，还可以通过简单地给它一个不同的值来更新它//这里先声明未赋值，结果是undefined//可以先使用 在声明，结果不报错是10//可以重复声明,结果是30，后面
2024-06-04 10:29:08
1147
原创 JS实现将当前时间戳的时分秒置为00:00:00
大多数解决办法是将当前时间戳转换成日期，再结合些字符串处理方法，将小时，分钟转换成00:00；效果：获取当前时间戳，起始时间时分秒置00:00:00。直接利用moment，将里面的时分秒置成0。
2024-05-23 11:55:30
1344
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人