sxliu414

摘要： 使用React、Js、Mui实现拖拽功能 能够左右拖拽，并且右侧可以拖拽排序 使用到的库@dnd-kit/core、@dnd-kit/sortable、'@dnd-kit/utilities 安装 npm install @dnd-kit/core @dnd-kit/sortable @dnd-ki 阅读全文

摘要： 当react项目中，你需要通过判断当前屏幕宽度改变，对不同宽度断点进行不同的处理，例如，当屏幕宽度缩小至768px及以下时，需要将某一个属性值改变，或者是当屏幕宽度缩小或者放大到某一宽度时，需要调用某个方法 使用window.matchMedia()监听媒体查询 import React, { us 阅读全文

摘要： React项目中使用轻量富文本编辑器 安装 npm install react-quill 创建编辑器组件 // src/MyQuillEditor.js import React, { useState } from 'react'; import ReactQuill from 'react-q 阅读全文

摘要： antd表格中默认展开所有行，expandable下的defaultExpandAllRows属性失效 原因：dom节点渲染时defaultExpandAllRows是生效的，但此时还没有数据，当表格组件拿到数据时会重新渲染表格组件，导致defaultExpandAllRows失效 解决：给表格组件 阅读全文

摘要： antd中transfer穿梭框组件双击移动数据 需求：双击任意标题，实现穿梭功能，而不影响搜索功能 使用render可以自定义标题， 若在外层套了div，则需要重写filterOption方法，否则搜索会报错 此案例在div上添加了onDoubleClick双击事件，实现双击移动需求 完整代码： 阅读全文

摘要： React中store的使用(redux、redux-tookit)及store数据持久化(redux-persist) 安装 npm install react-redux npm install @reduxjs/toolkit npm install redux-persist 简单使用sto 阅读全文

摘要： 在React中使用typeit库 安装 npm install typeit-react 在需要用到的组件导入，使用 import TypeIt from "typeit-react"; const text () => { return ( <div> <TypeIt>文字打字效果</TypeIt 阅读全文

摘要： Vite+Antd+tailwind初始化项目 使用vite创建项目 首先选择一个文件夹 进入命令窗口 使用vite创建项目 npm create vite@latest 初始化项目后 进入项目安装依赖 npm install 运行 npm run dev 使用Ant Design组件 安装 npm 阅读全文

摘要： react菜单Menu导航栏实现 //定义选中的下标 const [currentIndex, setCurrentIndex] = useState(initIndex) //选中样式改变(tailwind) const getCurClass = (index) => { return curr 阅读全文

摘要： antd表单中使用DatePicker，初始赋值、表单内容改变、表单提交报错 原因：DatePicker接受数据类型必须为时间类型而不能是字符串，同理当表单数据改变或提交时需要对数据进行处理 <Form form={form} //初始赋值 initialValues={{ cleanDate: d 阅读全文