Ant Design 4.20.0 发布,正式支持 React 18 和严格模式​!

简介: Ant Design 4.20.0 发布,正式支持 React 18 和严格模式​!
🙋🏻‍♀️ 编者按:Ant Design 4.20.0 正式发布,本文将带大家来看具体更新了哪些新特性。

◆ 🔥 支持 React 18 以及严格模式。

   ◇ 🐞 修复 Form 在 React 18 StrictMode 下,错误信息无法更新的问题。

   ◇ 🐞 修复 Notification 和 Message 在 React 18 下抛出使用 createRoot 的警告信息。

   ◇ 🐞 修复 BackTop 组件在严格模式下不能正常工作的问题。

◆ 🔥 新增 Segmented 分段控制器组件。

   ◇ 🛠 4.20.0 正式版后,Segemented 的 onChange 回调函数的参数从 ChangeEvent 调整为 value。如果你使用了 4.20.0-alpha.0 4.20.0-alpha.1,请注意这个变化。

◆ Form

   ◇ 🔥 Form 添加 useWatch 支持获取当前字段值。

   ◇ 🆕 Form 支持 useFormInstance 以获取当前上下文中的 Form 实例。

   ◇ 💄 修复 Form labelCol={{ sm: 24 }} 和 wrapperCol={{ sm: 24 }} 时样式错乱的问题。

◆ 🛎 Menu 添加 items 数据化菜单项支持以为将来性能提升做准备,并且 children 将会在下个大版本中废弃。

◆ 🆕 Image PreviewGroup 支持顶部进度渲染。

◆ Upload

   ◇ 🆕 Upload picture-card 模式支持配置图片的 crossOrigin 属性。

   ◇ 🐞 修复 Upload prefixCls 对列表不生效的问题。

   ◇ 💄 优化 Upload 操作按钮的样式细节。

◆ Table

   ◇ 🆕 Table 列筛选条件重置时,支持重置为默认值而非空值。

   ◇ 💄 修复 Table size="small" 时列头背景色和选择列宽度的样式问题。

   ◇ 🇩🇪 补全 Table 的德语国际化文案。

   ◇ ⚡️ 优化 Table 过滤列表的计算性能。

   ◇ 💄 优化 Table size="small" 和 size="middle" 时选择下拉菜单的边距样式。

◆ Tree

   ◇ 🆕 Tree 组件的 switcherIcon 属性支持 render-prop。

   ◇ 🆕 Tree 支持 rootClassName and rootStyle。

◆ Breadcrumb

   ◇ 🐞 修复 Breadcrumb 抛出 placement 废弃警告的问题。

   ◇ 🐞 修复 Breadcrumb 展示非预期的数字符号的样式问题。

   ◇ ⌨️ 为 Breadcrumb 层次结构增加可访问性支持。

◆ Anchor

   ◇ 🆕 Anchor getCurrentAnchor 参数中返回默认高亮项。

   ◇ 🛠 重构 Anchor 为函数组件。

◆ Cascader

   ◇ 🆕 Cascader 添加 showCheckedStrategy 用于配置回填方式。

   ◇ 🐞 修复 Cascader 的搜索结果未占满整个面板的问题。

◆ 🆕 Typography 的 onCopy 方法支持获取点击事件对象。

◆ 🆕 Grid 支持 justify="space-evenly"。

◆ 🆕 Dialog 及 Image 支持 rootClassName 属性。

◆ 🐞 修复 Skeleton 在没有 children 并设置 loading 为 false 时提示 Nothing was returned from render 的问题。

◆ 💄 优化 Switch 禁用色以更好适应非白底背景。

◆ 💄 移除 Tabs overflow: hidden 样式以修复 Select 和 sticky Table 在 Tabs 中的展现问题。

◆ 💄 修正 Steps 在 RTL 模式下样式问题。

◆ 💄 修复 Badge 在 RTL 模式下、独立使用时的动画效果。

◆ 🛠 优化 Modal id 生成逻辑,以优化无障碍体验。

◆ 🐞 修复 Select 和 AutoComplete 使用键盘向下滚动时行为异常的问题。

◆ Spin

   ◇ 💄 修复 Spin 动画样式在 Parcel 解析异常的问题。

   ◇ ⌨️ Spin 添加 aria 属性以提升可访问性。

◆ ⌨️ Dropdown 支持方向键切换选项。

◆ 🐞 修复 Title、Text、Paragraph 组件不支持 ref 的问题。

◆ Input

   ◇ 💄 Input.Group 对子组件屏蔽 Form.Item 的样式。

   ◇ 💄 调整 Form 下 TextArea 的样式。

◆ ⌨️ 修复 Checkbox 缺少 aria-checked 属性导致屏幕阅读器识别错误的问题。

◆ Less

   ◇ 💄 替换 less 中的 html 选择器为对应变量。

   ◇ 💄 修改 less 中 danger 值从函数改为变量。

   ◇ 🐞 箭头圆角使用固定值 2px 变量。

◆ TypeScript

   ◇ 🤖 修正 Upload 组件中 UploadChangeParam<T> 内部 fileList 不使用泛型问题。

   ◇ 🤖 更新 TypeScript 定义以兼容 @types/react@18。


💬 官方日志更新地址:https://github.com/ant-design/ant-design/releases/tag/4.20.0


相关文章
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
6月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
179 0
|
6月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
11月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
69 0
|
12月前
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
96 0
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
143 0
|
资源调度 前端开发
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
101 0
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
351 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
72 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
119 0