
react
文章平均质量分 51
仙女爱吃鱼
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
antd table合并复杂单元格、分组合并行、分组合并列、动态渲染列、嵌套表头
项目里遇到个需求,涉及到比较复杂的单元格合并 、嵌套表头、分组合并行、合并列等,并且数据列还是动态渲染的原创 2024-10-12 17:37:25 · 1887 阅读 · 0 评论 -
解决npmr run start运行项目时的报错Error: error:0308010C:digital envelope routines::unsupported
一开始umi-plugin-react一直安装不上,各种卸载package-lock.json删除啊,重装都不行,最后把node版本从16.18升级到18.10才安装好了。网上说是 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制,所以会报错。最后把这句代码加到package.json里的运行命令里就好用了。试了网上的几种方法都不行。艾玛浪费我半天时间……原创 2024-01-04 15:09:00 · 927 阅读 · 1 评论 -
antd 表单项联动验证时,disabled属性不生效
在antd表单中,表单项验证条件是根据其他表单项的值决定的,比如当前【时间限制】选择【无】时,【限制时段】表单项不可用所以我单纯使用是不生效的,因为,而直接使用 【获取表单字段属性】有可能是上一次的状态 ,导致渲染失败。原创 2023-11-07 16:14:22 · 1648 阅读 · 0 评论 -
antd Cascader级联菜单无法赋值回显问题
Cascader级联数据是服务端返回然后自己处理过的,使用了cascader的fileNames属性重置字段名,最后发现服务端回传的数据无法赋值回显在组件上,自己试了半天,还以为是数据问题或者是字段问题,最后发现是赋值的数据格式和级联数据的数据格式不一致的问题,导致无法赋值成功……然后查看详情时服务端又将此字符值回传线我,我再使用split方法解析成数组,自动就会解析将值解析成字符串格式。真的太无语了,总犯这种低级错误 ,但是我怕有同学和我一样,所以还是放上来吧,万一有人看到呢……原创 2023-11-03 18:49:23 · 1037 阅读 · 0 评论 -
antd树型表格的逐级展开折叠(每次展开都只展开到当前未展开的最小层级,每次折叠都只折叠到当前未折叠的最大层级)
如遇到每级展开层级不一致的,如【2级2】展开到第3级,那此时点击展开,所有已展开的不动,将未展开到第3级的其他元素全部展开到第3级。此时需要注意,我们应把没有子元素的【1级】,及末级均去掉,不参与折叠展开事件。折叠同理:如下,【2级2-1】收起,但当前未折叠的最大层级为【5级】需求有些变态,我们用一段话和一张图来演示下。再点击收起:【4级】收起。效果如下:所有3级展开。效果如下:【5级】收起。原创 2023-10-09 10:23:21 · 1239 阅读 · 0 评论 -
antd upload组件beforeUpload返回promise之后,获取的文件不是file类型导致上传失败
再看到最后,一开始没理解 这个originFileObj是啥,打印了一下info.file.originFileObj,发现这就是我们想要的那个file文件。我们发现 ,现在可以阻止上传了,但是传给服务端的文件不是二进制的,而变成了一个object,所以报错了。再后来又仔细阅读了文档 ,发现了这段,于是尝试在resolve时把对象返回去,依然报错。但是这样并不能阻止文件上传,看了官方文档后,改用返回promise对象上传。真无语,一个版本问题,解决了一上午,尝试各种办法,结果人家文档里写了。原创 2023-08-30 14:10:32 · 1547 阅读 · 1 评论 -
umi打包错误:You may need an appropriate loader to handle this file type, currently no loaders are co
然后我们发现这招确实好使,不报这个错了,但是开始报react-dom的错误。然后我们再安装下react-dom,安装不上可以加–force。但是搜索关键字没有找到相关代码 ,经查阅发现以下解决办法。然后发现 程序终于可以运行了……原创 2023-08-29 16:41:29 · 6527 阅读 · 0 评论 -
useContext用法+切换主题小示例+对象型字面量传递的优化
useContext的使用,使用useContext做切换主题,对象型字面量传递的渲染优化原创 2022-10-17 11:47:03 · 1021 阅读 · 1 评论 -
UseRef的正确使用与滥用避雷
useRef的使用场景与滥用举例原创 2022-10-13 17:31:59 · 2781 阅读 · 0 评论 -
hooks小案例
【代码】hooks小案例。原创 2022-10-11 14:42:55 · 231 阅读 · 0 评论 -
react18项目中引入插件后控制台eslint警告:Failed to parse source map from...
看起来是source map和node_modules的错误,所以我们改一下`webpack.config.js`中的source map配置找到`source map`配置后,在`exclude`中把`node_modules`文件夹添加进去,表示忽略这个文件夹下的文件内容原创 2022-07-06 16:31:05 · 2409 阅读 · 4 评论 -
虚拟dom是如何挂载到真实dom上的
一.先使用createElement()方法生成虚拟dom节点createElement(‘ul’, {class: ‘list’}, [ createElement(‘li’, {class: ‘item’}, [‘1’])] )确定VNode的结构class Element { constructor(tagName, props, children) { this.tagName = tagName this.props = props原创 2022-04-14 23:18:58 · 1203 阅读 · 0 评论 -
react 自定义hook
什么是自定义hookHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过自定义 Hook,可以将组件逻辑提取到可重用的函数中。首先也要遵循hooks的规则只在最顶层使用hooks,不要在循环、条件或者嵌套中调用hook,这样就能确保hook在每一次渲染中都按同样的顺序调用。多次调用hooks可以保证hook状态的正确。只在react函数(react函数组件、自定义hook组件)中调用hook,不要在普通的ja原创 2022-04-01 23:19:17 · 5965 阅读 · 1 评论 -
Vue和React的异同点及如何选型
一、React和vue相同点:构建虚拟dom实现快速渲染轻量级易于集成打包工具,路由工具及状态管理工具优秀的支持和社区二、React和vue有什么区别Vue使用的是开发者更熟悉的模板与特性: html+css+js 组合模式呈现(template),跟web现有的技术能很好的配合,比较容易 的把 功能和布局 分开,vue更注重前端开发者的习惯,所以更容易被前端工程师接受;而react使用的是 函数式编程(jsx在js中编译成html),更适合 有函数式编程经验 的开发者vue是自动档原创 2022-03-31 17:21:57 · 4450 阅读 · 0 评论 -
antd-mobile picker组件不显示或者报错解决
版本问题原创 2021-11-23 16:14:12 · 1792 阅读 · 0 评论 -
react hooks中为useState添加回调函数(自定义hooks)
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-11-23 15:43:57 · 5147 阅读 · 1 评论 -
react中px转rem(px2rem和px to rem &rpx的使用)
1.直接在scss文件中使用函数2.安装插件原创 2021-10-27 19:47:50 · 4021 阅读 · 0 评论 -
react中使用swiper6.x(含完整css)
export const getTribeCourseAllDetail = (courseId) => {axios.defaults.withCredentials = true;return axios.get(https://tribecourse.58.com/course/detail?courseId=${courseId})// let courseDetail;// // 没有返回结果就去请求接口// function getDetail() {//原创 2021-09-17 18:02:56 · 1480 阅读 · 0 评论 -
react多行文字超出省略号失败解决办法
在react less文件中直接使用以下css属性失效// 单行文字加省略号 overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' // 两行文字加定高 overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', -webkit-line-clamp: 2, -webkit-box-orient: 'verti原创 2021-09-17 17:45:21 · 634 阅读 · 0 评论