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

比较流行的有react-beautiful-dnd和dnd-kit，可能还有react-sortable-hoc，不过这个好像已经不再维护了。我的项目里使用了antd，antd表格有一个示例还是挺像的，本来我想用Table实现，它自带拖拽。这个作者最后推荐了dnd-kit所以我最后选择了这个库，但其实我这个需求用react-beautiful-dnd‌ 也能实现。您还需要确保安装了对等依赖项。这里有两个版本，我不想用immutability-helper库，觉得多一个依赖没啥意义，所以我去掉了。

我的场景很特殊，大部分人都不会遇到，我只是做个笔记，记录一下。我的场景里即：切换到 一个iframe页面时，再切换回来日历的样式丢失了！不仅丢失了样式还导致页面崩溃了，怎么点击都没反应。最终都是由于!styleEl ||!styleEl.isConnected 这个条件不满足，导致的，所以解决方案就是 注释掉这个判断。具体原因，后面我会研究一下再补充。

我直接用的@fullcalendar/react 因为我的和它基本功能完全一致。卡片式的日历，其实我是推荐 antd的，我两个都写了一下都能实现。它需要处理的东西很多，点击上个月的日期时，需要自己跳到上一个月。

react使用Fullcalendar

这里我用的是style Module 如果你不用这个请自行转换语法。只需要把resizeBox.tsx里的styles.去掉。并且直接引入less即可。这里使用了flex巧妙的实现了这个效果，左边div设置一个宽度，右边的flex:1即可。上下设置height，且 flex-direction:column 设置纵向布局。其他用法可以自行拓展组件和嵌套resizeBox组件使用。我只是提供一个思路。鼠标放到蓝色的线上即可拖动。

最近写一个项目遇到了需要拉伸调整一个元素得大小（宽高）。所以打算实现一下。思路就是用 mousedown、mousemove、mouseup 来实现。mousemove是动态获取坐标，然后 动态改变元素宽度这种功能建议使用 成熟的库来实现，兼容性什么的一般都会适配。

DatePicker throws error "cannot be used as a JSX component" DatePicker抛出错误“不能用作JSX组件”

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

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

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

h5、pc端项目避免缓存

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

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

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

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

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

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

react 配置axios

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

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

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

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

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

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

create-react-app v5 配置less

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

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

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

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，就算什么都不写也会请求）

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

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

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

react-router-dom v4 可以使 withRouter (函数组件里可以用这个方法),当然 也可以直接 this.props.history.push。很明显 这个报错 是说 react-router-dom 里没有 useHistory。这个就涉及 react-router-dom这个插件的版本问题了。react-router-dom v5 是使用 useHistory。问题出在这里了 不同版本差异化，所以用之前需要确认版本。react-router-dom v6 里。..........

dva.js打包 hash文件名dva.jsdva中如何在打包时使用hash文件名并自动引入到index.html中

react-to-vue是一个能把 react组件转换成 vue 组件的插件，目前来看它只支持基础的组件代码转换。也就是说 你react里不能有 react 的一些独有的api。比如：路由、ui库（例如：antd）等等。react to vuegithub地址（https://github.com/vicwang163/react-to-vue）作者的认为使用场景：1. 你如果想开源好的组件，那可以先写react，再用react-to-vue转成vue，这样你写的组件变成了跨框架的组件，为绝大部分人服务。.

React Hooks中如何获取上一轮的state和propsReact class 获取上一轮的state 和props

​1.设置rowKey属性，也未设置columns属性的配置中第一列的key（react所需）Warning: Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary keyWarning:[antd:Table] Each record in dataSource of table should have a unique `key` pro

antd Table 实现 表格行固定

globalthis is not defined