antd 3升级4遇到的问题与解决方式

于 2023-10-07 17:16:10 发布
阅读量353 收藏
点赞数
文章标签： react anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/solitude1128/article/details/133638165
版权

前情提要：3.26.13 => 4.24.14

首先把package.json中改为4的版本号，然后删除node_modules后，重新 npm install 下载

此时运行会报一大堆错，不慌张，下载一个模块先

npm install rc-util

下载后运行，此时没有bug了，但是可能会报一堆警告，依然不能使用

具体看是什么警告，挨个排查，我遇到的是这些，如下

1. 引入的LocaleProvider模块在4被废弃，需要修改为ConfigProvider

2. icon变为按需引入了，，只能手动改掉所有引入icon的地方

3. Form.create()方法废弃了，需要全删掉

4. 还有getFieldDecorator方法也换写法了，都得改

具体可以参考官方文档https://4x-ant-design.antgroup.com/docs/react/migration-v4-cn 

solitude1128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
codemod-v4:用于antd v4升级的codemod cli
05-07
English | 蚂蚁设计v4 Codemod 一组可帮助使用升级antd v4的codemod脚本。（受启发） 用法 在运行codemod脚本之前，最好确保首先提交本地git更改。 # global installation npm i -g @ant-design/codemod-v4 # or for yarn user # yarn global add @ant-design/codemod-v4 antd4-codemod src # use npx npx -p @ant-design/codemod-v4 antd4-codemod src Codemod脚本介绍 v3-Component-to-compatible 从@ant-design/compatible替换不推荐使用的Form和Mention ： - import { Form, Input, But
antd遇到的问题汇总
01-08
遇到问题看文档一般都可以得到解决。 table添加滚动条以后表格对不齐 官方文档给出的解释： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。 建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。 注意：v4 版本固定列通过 sticky 实现，IE 11 会降级成横向滚动。 添加的类名，为了和其他表格作区分。在你想重置的时候调用该方法即可。我的应用场景是点击查询的时候，要复位T.T。 下拉框Se
vue项目中安装ant-design-vue出现错误
xi_aot的博客
08-31 4447
使用 npm i --save ant-design-vue 命令时，项目报错
antd v3升级v4过程全记录——比你想象更简单！
weixin_43867717的博客
10-22 3461
antd v4版本出来有一段时间了，今天打算升个级。 参考官方文档升级说明 1.升级准备 先升级到 3.x 的最新版本，按照控制台 warning 信息移除/修改相关的 API。 升级项目 React 16.12.0 以上 如果你仍在使用 React 15，请参考 React 16 升级文档。 其余 React 16 废弃生命周期 API 请参考 迁移导引。 2.开始升级 可以手动对照上面的列表逐条检查代码进行修改，但是没必要哇~ 官方提供了一个 codemod cli 工具 @ant-de
Ant Design Vue可能遇到的问题（持续更新）
一入前端深似海
09-15 4530
一、table 筛选功能 修改icon 首先需要在定义的 columns 中 设置 filterIcon 属性。 computed: { columns() { let { sortedInfo, filteredInfo } = this; console.log(sortedInfo, filteredInfo) sortedInfo = sortedInfo || {}; filteredInfo = filteredInfo
antd3升级到antd4（已解决所有报错）
owo_ovo的博客
08-17 1585
react项目将antd3升级到antd4，并解决常见报错
ant-design-vue 4.x升级问题-样式丢失问题
前端
08-05 2821
该文档是在升级ant-design-vue到4.x版本的时候遇到的问题。
antd从v3升级到v4
qq_49464155的博客
02-18 4798
因为项目需求，需要对antd进行一个升级，下面我简述下我升级的步骤 1. 安装最新版本antd，升级项目 React 16.12.0 以上 2. 若项目中使用了Form表单/Icon组件 安装@ant-design/compatible，然后在之前使用Icon/Form组件的地方使用如下引用方式就可以了，这个只是个兼容性办法，项目可以正常运行，控制台会有警告，等以后有时间了再切换成antd的组件 import { Form, Icon } from '@ant-design/compatible'
antd pro 升级 antd4.0
u011561536的专栏
05-07 4017
"ant-design-pro"的项目，版本是2.1.1 ，由于4.0pro页面结构大变，不可能完全删除弃用的icon，反正我不会改了 开始升级，第一步修改以下依赖 "dependencies": { "@ant-design/compatible": "^1.0.2", //兼容3.0，form和icon组件 "antd": "^4.0.0", "reac...
yarn与npm安装的项目有时候会报错
react6的博客
06-10 1345
包的依赖升级后出现的错误问题 antd@^4.5.2: version "4.9.3" resolved "https://registry.npm.taobao.org/antd/download/antd-4.9.3.tgz#a9666fe3d7e0b18818e7f8bdb81abbf8a4a3e7d2" integrity sha1-qWZv49fgsYgY5/i9uBq7+KSj59I= dependencies: "@ant-design/colors" "^5.0.
解决antd的Form组件setFieldsValue的警告问题
01-21
解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
sunflower:a通过支付宝行业技术处理antd4和antd3的处理组件
05-07
支持antd4，antd3 antd组件之间的关系使用react-hook表示，而process组件用于简化开发 流程组件是从实际业务流程中提取并立即使用的 为什么 通常，我们使用antd的多个组件来完成一个过程。 例如，如果要完成“在...
ant-design-vue 遇到的问题和常见场景的实现
wwf1225的博客
08-28 3891
ant-design-vue 遇到的问题和常见场景的实现 1、select/datepicker/asacader 组件菜单框显示时，滚动页面，菜单框不随父元素滚动，而是根据body页面滚动 原因： ant默认append到body 解决： 通过组件的属性getXxxContainer 修改渲染的父元素 <template> <a-selec...
vuex4. 版本安装报错
m0_67063319的博客
02-28 419
安装报错: Uncaught TypeError: Object(...) is not a function vue2.0版本搭建项目,安装vuex4.版本报错,反复安装都会报错,想着可能是版本错误,最后指定了版本下载 yarn add [email protected] 就没有报错啦; 下载过程中,也会与警告,但是没注意,可以在package.json里查看版本是否是 4.版本的 ...
解决安装ant design vue遇到的版本问题
qq_42458917的博客
04-04 234
【代码】解决安装ant design vue遇到的版本问题。
ant design pro vue 启动报错 ERROR Failed to compile with 1 error 20:34:09 error in ./src/components/Num
m0_58002936的博客
07-21 5212
ERROR Failed to compile with 1 error 20:34:09 error in ./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true& Syntax Error: TypeError: Cannot set properties of undefined (setting 'parent')
为什么会头痛，如何缓解头痛？
T29332022的博客
03-24 468
随着各种生活压力、学习压力越来越多，人们就会不珍惜自己的身体，大部分时间都在加班，但是呢，长时间的加班熬夜就会过度消耗自己的身体，就会有很多头疼的现象。当一个人长期处于高压状态时，就会出现头痛，因为大脑一直处于过度劳累的状态，没有放松，尤其是在解决问题的时候。许多疾病在病程中都会引起头痛，包括发烧、感冒、颈椎病、脑膜炎、低血糖、头部肿瘤等，具体什么头疼还是要去检查一下。相信每个人注重自己的身体健康，不熬夜，早睡早起，适当运动，适当缓解自己的情绪，有助于缓解自己的头疼症状。建议戒烟、戒茶、戒酒。
nodejs-x64-0.10.21.tgz
最新发布
05-11
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
vue3 antd4 轻量模版
12-30
Vue3 antd4 轻量模版是基于Vue.js和Ant Design Vue的轻量级模板，旨在提供快速搭建项目的解决方案。Vue3是Vue.js的最新版本，具有更快的渲染速度和更好的性能优化，使得开发者可以更加高效地开发应用程序。Ant Design Vue是一套优秀的UI组件库，提供了丰富的组件和样式，能够帮助开发者快速构建出美观、功能完善的界面。 在Vue3 antd4 轻量模版中，我们可以利用Vue3的Composition API来编写更加清晰和灵活的代码，将逻辑相关的代码组织得更加有条理。同时，Ant Design Vue提供了大量的预制组件，例如按钮、表格、表单等，可以大大加速开发进程，同时还能确保UI的一致性和整体性。 这个轻量模版还提供了一些常用的页面模板和布局，例如登录页面、仪表盘、表单页面等，以及一些常用的功能模块，如权限管理、数据展示等。这些模板和功能模块都是基于最佳实践和用户体验设计的，可以帮助开发者更快速地搭建出符合需求的应用程序。 另外，Vue3 antd4 轻量模版还支持自定义主题和样式，可以根据项目的需求进行灵活的定制。总的来说，这个轻量模版整合了Vue3和Ant Design Vue的优势，提供了一套简洁、高效、可定制的开发解决方案，能够帮助开发者快速构建出符合需求的现代化应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值