4

antd datepicker 报错问题

 2 years ago
source link: https://mrleidesen.github.io/posts/antd_datepicker/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

antd datepicker 报错问题

2022-08-30 16:19:46 · MrLeiDeSen

前言#

这两天开发同事碰到一个问题,他开发环境下 antd 的 DatePicker 组件会报一个错

antd datepicker cannot be used as a jsx component

搜了一下网上也有不少问题 issue链接

因为我们项目中用得还是 4.20.x 版本的 antd ,所以没有办法测试新版是否修复了问题,目前按照我们自己的方式找到了解决方法

解决方法#

其实和上面 issue 里的解决方法一样,在 package.json 中加入 resolutions

"resolutions": {
  "@types/react": "17.0.44",
  "@types/react-dom": "17.0.17"
}

在我们项目中,这个版本的 types 能很好的解决这个问题,但是还会出现一个问题。

因为用到了 resolutions ,所以 node 14 左右的 npm install 会没法成功,导致报错依旧。 而 node 16 的版本会因为版本不兼容导致 npm install 失败,需要 –force 才能继续安装

所以这边建议使用 yarn 来进行项目的运行和安装。

如果你们项目中还是使用 npm ,可以参考在 scripts 中加入如下

"scripts": {
  "preinstall": "npx npm-force-resolutions",
}

或者 npm install –force ,实测也是没有报错,但不知是否有其他副作用


Recommend

  • 31
    • lutaonan.com 6 years ago
    • Cache

    高效的 GraphQL + Antd

    本文同步发布在 https://gist.github.com/djyde/955aa3f8f46116d648d44a743970b089 (请在那里进行讨论) 在过去的几年,不论是面...

  • 33
    • 掘金 juejin.im 5 years ago
    • Cache

    AntD 圣诞节彩蛋事件

    此文仅代表个人立场,利益不相关。 回顾 今早一到公司,就发现群里有人说 antd 组件的样式变了,所有的Button组件都被加上了雪花,接着就看到 GitHub 上的 issue,几乎所有前端相关的群都在讨论这件事。 而 antd 的维护者偏右似乎还没有意识到

  • 15
    • www.zoo.team 4 years ago
    • Cache

    Antd Form 实现机制解析

    背景 在中后台业务中,表单页面基础的场景包括组件值的收集、校验和更新。在 to B 业务中,表单页面的需求往往更复杂和定制化,除了上述的基本操作,还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景,在一些...

  • 10

    V2EX  ›  React 求推荐一个轻量级的 react ui 库,不想用 antd   dmjob2015222 · 1 小...

  • 3

    公司一个开发迭代两年的项目因后期需要扩展更多的业务板块需要进行拆分,一是要满足后期不断新增板块业务不对现有业务产生影响,再者就是目前存在单项目业务量过大,开发维护难度极大,于是不得不考虑将现有业务板块进行微服务化拆分,以满足后期的需求。

  • 11

    今天又来了个新的需求,需要两个联动的输入框,而它们之间的“联动”在于,前者为王,后者不能大于前者的值。举个简单的例子,卖商品的最低价格 <= 最高价格,最高价格不可能比最低价格要低吧。要知道 Antd 4 和 3 的写法不太相同,4 主要使用的...

  • 3
    • zhuanlan.zhihu.com 3 years ago
    • Cache

    antd mobile v5 它悄悄的来了

    antd mobile v5 它悄悄的来了桃翁​公众号:前端桃园在 React 领域里,一直缺...

  • 11

    Vite 2.0 + React + TypeScript + Antd 搭建简单脚手架Vite 出来好一段时间了,最开始支持 Vue,而现在已经不受框架限制了。而 Vite 解决的是对于项目每次启动与打包构建等待时间长的问题...

  • 11
    • chegva.com 2 years ago
    • Cache

    Vue使用antd样式穿透的问题

    Vue使用antd样式穿透的问题最近使用antd写前端页面,想改变一下表格的默认样式,发现css改了但是没效果,后面搜了下得使用样式穿透来解决。<a-card class="progress" :title="$t('progress')" :bordered="fa...

  • 9

    如何给 Antd 中的 DatePicker 添加「至今」功能 在一些比如选填教育经历、工作经历等场景的表单时,经常会遇到当前阶段是在职的情况,那这时应该选择「至今」。但目前 <DatePicker /> 组件并不支持这一功能,需...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK