从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

原创 前端实现浏览器自定义滚动条

前端实现浏览器自定义滚动条

原创 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组件”

原创 react 实现点击其他地方，隐藏列表（点击元素外）

react 实现点击其他地方，隐藏列表（点击元素外）

原创 react 实现页面状态缓存（keep-alive）

因为 react、vue都是单页面应用，路由跳转时，就会销毁上一个页面的组件。但是有些项目不想被销毁，想保存状态。比如：h5项目跳转其他页面返回时，页面状态不丢失。设想一个 页面我滑倒了中间，然后跳转到 详情页然后 返回，之前的页面刷新了，回到顶部了肯定不行（搜索条件之类的消失了，滚动条回到顶部了）！比如：pc端项目后台管理项目里点击时 打开一个页签，页签切换，状态页会丢失。每次切换页签都重新请求了接口。

原创 react、vue移动端项目使用技术

现在移动端项目越来越多，h5项目需求量也很大。所以有必要总结一下，h5 移动段使用到的技术。一般 h5可以在微信、内嵌app（webview）、小程序（webview）等等只要有浏览器环境都能运行。具体使用方式可以参考 我 create-react-app 专栏里的文章(仅限 react)。不过 vue页大差不差。其实 如果你的页面要求 缓存状态 可以优先选择 vue。react需要自己用第三方插件 实现，不过 react 18有个中的官方实现 也可以实现。

原创 React、vue、h5端项目避免缓存

h5、pc端项目避免缓存

原创 create-react-app 打包去掉 map文件

在使用 create-react-app 创建的React应用中，默认情况下会生成带有.map文件的打包文件，这些.map文件包含了源代码和调试信息，用于开发和调试过程中进行错误跟踪。然而，在生产环境中，这些.map文件通常是不必要的，因为它们会增加打包文件的大小，而且不会被浏览器使用。默认的打包文件目录截图：map文件很大，部署到生产复制有些不合适，虽然，不影响加载速度，但是占磁盘空间。配置完后需要重新 npm run build!总的来说 方法三最方便。

原创 react 使用环境变量的方法和步骤（dotenv-cli 实现使用环境变量步骤）

react 使用环境变量的方法和步骤（dotenv-cli 实现使用环境变量步骤）

原创 react-router v6实现动态的title(react-router-dom v6)

react-router v6实现动态的title(react-router-dom v6)

原创 【无标题】

原创 React中StrictMode严格模式，导致开发环境，接口会请求两次或多次（ useEffect 请求多次）

我在首页 useEffect里 请求一个接口，整个页面就在这里请求这一次接口。但 实际上请求了两次。我检查了代码，确定只调用了一次，且我这个页面就是父组件。也就是说，你也可以 不做处理，如果你觉得开发环境请求两次不能接受，可以注释掉 index.js或者 App.js里的严格模式注释掉。我在用 create-react-app时，开发环境，一进页面接口会请求两次或多次。

原创 input 输入中文，高频触发 onchange和oninput事件（CompositionEvent API解决）

input 输入中文，高频触发 onchange和oninput事件（CompositionEvent API解决）

原创 create-react-app v5 打包配置(部署到非根目录)

publicPath: 用于指定构建后静态资源在服务器上的路径。base: 用于指定应用程序的根路径，以确保路由可以正确匹配到对应页面。这两个配置项在部署到非根目录时很重要，可以确保应用的资源和路由正常加载和导航。

原创 react配置 axios

react 配置axios

原创 React create-react-app 里配置代理（解决跨域）

其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。修改时需要 npm start重新运行一下，要不然可能不生效。proxy只能以 http:// 或https://开头 否则会报：示例：比如后端给的完整地址如下：这一段是相同的地址（也就是所有接口都是这个前缀），根据你的接口来定。然后使用即可 比如 axios url直接请求就行代码如下：request就是axios 只是我又封装了一层。

原创 react create-react-app v5配置 px2rem （不暴露 eject方式）

react create-react-app v5配置 px2rem （不暴露 eject方式）

原创 react create-react-app v5 从零搭建（使用 npm run eject）

好久没用 create-react-app做项目了，这次为了个h5项目，就几个页面，决定自己搭建一个（ps:mmp 好久没用，搭建的时候遇到一堆问题）。我之前都是使用 umi。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西，开箱即用。

原创 react create-react-app v5配置 px2rem （暴露 eject方式）

react create-react-app v5配置 px2rem （暴露 eject方式）

原创 react create-react-app v5 从零搭建项目（不暴露 eject）

好久没用 create-react-app做项目了，这次为了个h5项目，就几个页面，决定自己搭建一个（ps:mmp 好久没用，搭建的时候遇到一堆问题）。我之前都是使用 umi。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西，开箱即用。我的环境如下：v5版本 好多问题，有很多 问题，有些插件 里的办法也不适配了（坑很多，很多 time:2023-09-27）。

原创 react create-react-app v5 配置路由(报错及注意事项)

react create-react-app 配置路由报错(Uncaught TypeError: Cannot read properties of null (reading 'useRef'))

原创 react create-react-app 配置less

create-react-app v5 配置less

原创 js实现左右列表对齐（左边点击时，右边滚动和左边对齐。反之右边点击时，左边滚动和右边对齐）

js实现左右列表对齐（左边点击时，右边滚动和左边对齐。反之右边点击时，左边滚动和右边对齐）

原创 BraftEditor使用及自动获取焦点的方法

BraftEditor使用及自动获取焦点的方法

原创 react 实现浮动可吸附悬浮窗，悬浮球，悬浮按钮，支持拖动拖拽功能（suspend-button）

最近在做移动端，有个需求是 实现一个浮动球可拖拽，能吸附（吸附到 左右两则，距离哪进就吸附到哪边）。使用 suspend-button 实现

原创 react antd Table里 使用filtes和scroll时页面报：Cannot read property ‘appendChild‘ of null at getContainer

react antd Table里 使用filtes和scroll时页面报：Cannot read property 'appendChild' of null at getContainer

原创 react antd Modal里Form设置值不起作用

react antd Modal里Form设置值不起作用

原创 Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop

如果是Model里用了from报警告，我更倾向于 使用 useRef 判断 当useRef有值时再调用。3.还有一种情况就是确实写了form,并且写了form={form}，但还警告，我就是这种情况。意思是：警告：“useForm”创建的实例未连接到任何Form元素。在调用form的实例时，Modal内部的组件并未渲染，才导致了该错误。form必须在标签上写form={form}1.使用 useRef 判断 当useRef有值时再调用。如果你表单是子组件则可能需要这样。

原创 Invaliad options object.Css Loader has been initialized using an options object that does not match

Invaliad options object.Css Loader has been initialized using an options object that does not match the API scheam.options has an unknown property 'locakIdentName'.These properties are valid:object{url?,omport?,module?xxxx}报错的解决方案

原创 antd的upload组件，阻止默认上传事件（原上传默认会请求一个url，就算什么都不写也会请求）

antd的upload组件，阻止默认上传事件（原上传默认会请求一个url，就算什么都不写也会请求）

原创 前端实现 input 回车搜索（html,vue,react实现）

前端实现 input 回车搜索（html,vue,react实现）form表单实现keyup监听实现

原创 Legacy versions of mkdirp are no linger supported.Please update to mkdirp 1.x.

Legacy versions of mkdirp are no linger supported.Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.x)不支持mkdirp的旧版本。请更新到mkdirp 1.x。（请注意，API表面已更改为在1.x.x中使用Promises）上面 给出了 更新到 1.x.x 所以 按照要求更新就行。不行的话 就更新到最新版本。

原创 谷歌浏览器安装插件（从 Edge 浏览器里获取插件）

谷歌浏览器安装插件（从 Edge 浏览器里获取插件）沉浸式翻译插件谷歌浏览器 拓展安装

原创 浏览器window.open()用法，以及利用其实现拦截弹出式窗口

浏览器window.open()用法，以及利用其实现拦截弹出式窗口window.open('url','_blank','toolbar=no,location=no,directories=no,status=no,menubar=no')

原创 vue、react里 加载glb类型的3D模型(可使用的技术栈推荐)

vue、react里 加载glb类型的3D模型(可使用的技术栈推荐)

原创 immersive-translate(沉浸式双语网页翻译扩展)，解决谷歌翻译无法使用问题

谷歌停止了大陆的谷歌翻译服务，所以找到了immersive-translate 插件解决翻译问题。当然 最直接就是 换个浏览器比如 Edge\Firefox等等。immersive-translate(沉浸式双语网页翻译扩展)，解决谷歌翻译无法使用问题

原创 xlsx 解析excel 后渲染到表格里（前端实现 解析excel渲染到表格）

xlsx 解析excel 后渲染到表格里（前端实现 解析excel渲染到表格）

原创 react报 Relative imports outside of src/ are not supported

react报 Relative imports outside of src/ are not supported 。react 限制开发者从非src目录导入模块文件 解决方案

原创 js 实现隐藏表格列

js 实现隐藏表格列。动态 渲染列

原创 js 实现 输入 行数和列数动态生成一个表格

你可以 绘制的时候根据x,y再设置个宽高比如，你想让一个格子是10x10那就 动态计算表格的 width,height.要求时 输入 x 和 y ，x是行 y是列 ，然后 输入 一个数 x1,y1对其 上色。2.上色 的话 根据x1找到 tr在 根据 y1找到 所在td 然后给其加个背景色。其实 表格的宽高 也可以动态，要不然 你生成的多了会很密集。自己传一个 x,y就行。tables.style.height=y*你要的每格高度。tables.style.width=x*你要的每格宽度。

原创 vue 动态绑定多个类名（:class动态绑定多个类名）

vue 动态绑定多个类名（:class动态绑定多个类名）