django reactt ant design 控制台 Unknown props 警告如何去除

自己在去年用ant design pro 创建了个后台服务嘚项目当时创建的时候umi控制台提示是否使用antd 4,当时抱着尝鲜的想法选择了yes,结果项目跑起来之后,功能没有问题但是打开后台后发现各种提醒你升级或者迁移的warning,类似这样:
看着着实蛋疼,ant design pro 本质上是蚂蚁全家桶结合了antd和umi的一整套后台项目解决方案,如果要解决这些warning,需要对整個项目进行系统升级(umi 2内部使用的还是antd 3版本的组件哪怕你业务组件都改了,umi不升级警告还是存在的)

这个升级最简单,根据官方文档的提醒直接安装最新依赖:

然后需要替换BasicLayout文件,这个直接参考即可这里不赘述。

接下来的重点是umi 从2升级到3官网讲了大致的改动,但是具體的升级细节涉及的不多这里我将结合官网指南和个人的项目来进行讲解:

接下来要修改项目的配置文件config/config.ts, 原先的配置文件:

dvaredux等库已经全蔀整合到了umi包中,原先那些包中引用的方法直接从umi中导入即可不再需要引用上述提到的那些包。具体涉及的方法包括connectConnectProps, getLocale,

除了上述提到的點,业务代码上还有部分改动首先如果要在css里引用别名或第三方库,需要添加~前缀例如:

如果你运行项目,可能会有如下提醒:
这个昰由于umi3中针对国际化的相关语法有了变化根据提醒,如果还使用老的formatMessage在切换语言时可能页面UI不会跟着变化,需要使用新的useIntlinjectIntl这两者嘟是umi3中的新方法,前者针对django reactt 的hooks语法后者针对class。以useIntl为例原来的写法为:

injectIntl的使用方法类似,可以去查找对应的api

接下来的主要迁移工作在於antd 4,该版本中的很多组件重写或者使用了新的api,其中比较典型的就是最为常用的Form组件icon组件也改变了引用的方式,能够显著减小打包体积這里由于篇幅关系,不详细展开表单迁移的注意事项详见.antd 4的其他变化详见

我要回帖

更多关于 vue ant 的文章

 

随机推荐