ant design

Ant Design Form.Item 多元素场景踩坑指南：自定义onChange导致表单值同步失败解决方案在使用Ant Design（以下简称antd）Form组件开发时，我们经常会遇到在一个Form.Item中包裹多个元素的场景，比如输入框+选择器+按钮的组合。这种场景下，很容易出现表单值无法正常同步、Form.Item无法捕获元素变化的问题，尤其当我们为表单元素绑定自定义onChange事件时，踩坑概率会大幅提升。本文结合实际开发场景（基于antd 4.x版本，最常用稳定版本，兼容主流React项目），拆解问题原理、踩坑点及解决方案，帮助大家避开同类问题。（注：antd 5.x核心逻辑一致，仅部分API细

react路由配置相关

react使用Ant Design

🚀 从重复 CRUD 到工程化封装：我是如何设计 useTableList 统一列表逻辑的在中后台项目中，最常见的页面不是表单，而是列表页。真正消耗时间的，往往不是业务复杂度，而是分页、排序、loading、查询参数同步这些重复劳动。

ant design vue Table根据数据合并单元格之前在外包做项目的时候，甲方提出一个想要合并单元格的需求，表格里展示的内容是领导们的一周行程，因为不想出现重复内容的单元格，实际场景中领导可能连续几天参加某个会议或者某个其他行程，本来系统中对会议时间冲突是做了限制，也就是不能创建时间冲突的会议，那么对重复行程的单元格直接进行合并是没有问题的；但是后来又放开了限制、又允许存在会议时间冲突的情况了，因为实际中可能存在连续几天的大会行程中，又安排了几个小会，所以在后续的沟通中确定的方案是：单独的连续行程进行合并，如果中间出现多个行程就不合并，如果单独的长行程

Ant Design Vue 日期选择器英文不变更中文问题在全局已经配置中文（ConfigProvider + dayjs.locale('zh-cn')）的情况下，DatePicker 组件仍出现“中英文混杂”：

天蓝色的鱼鱼

Ant Design 6.0 正式发布：前端开发者的福音与革新更快的性能，更小的体积，更好的开发体验作为一名前端开发者，相信你对 Ant Design 都不陌生。这个拥有近10万Star的React UI组件库，一直以来都是企业级中后台项目的首选。最近，Ant Design 6.0正式发布了，这不仅是版本号的迭代，更是一次技术架构的全面革新。

🎉 Ant Design 6.0 来了！这一次它终于想通了什么？大家好😁。还记得我之前那篇吐槽《当 Ant Design 成了你最大的技术债》的文章吗😂？在那篇文章里，我痛斥了 Antd 的黑盒样式、难以覆盖的 !important 地狱，以及臃肿的 CSS-in-JS 运行时性能。

🎉 Ant Design 6.0 来了！ 🎉自开源以来，Ant Design 已收获 96.6K Star、累计 31.9K issue、20.7K PR、发布了 904 个 npm 版本，并有 2314 位贡献者共同参与其中。这些数字不仅代表着社区的活跃度与支持，也见证了项目的不断进化与成熟。

漠月瑾-西安

React 组件二次封装实践：解决自定义 Props 传递导致的 DOM 警告问题在现代前端开发中，特别是使用像 Ant Design (antd) 这样的 UI 组件库时，我们经常面临一个共同的挑战：如何在保持组件库原有功能和样式的基础上，根据项目特定需求进行定制和优化。

小李小李不讲道理

「Ant Design 组件库探索」五：Tabs组件闲言少叙，这次是tabs组件的探索，开始吧！Ant Design 的 Tabs 组件是一个功能强大的标签页组件，支持多种样式、动画效果和交互模式。它基于底层的 rc-tabs 库构建，提供了丰富的定制化选项和优雅的用户体验。

今天头发还在吗

React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案当前例子是以React 18 + Ant Design + tsx在从API获取日期数据或用户输入日期时，当遇到无效日期字符串时，页面会显示"Invalid Date"错误：

今天头发还在吗

【React】TimePicker进阶：解决开始时间可大于结束时间的业务场景与禁止自动排版该例子框架为React + TypeScript + Ant Design 📢注意：本文使用React 18+和Ant Design 5.x版本需要预先安装dayjs处理日期时间示例包含完整的类型定义和实时显示功能

基于Antd的SchemaForm 的表单复杂配置传统的Form 组件，代码大致如下使用schemaForm的话，代码如下配置化的优点，代码更加简洁，可读性更高，更容易维护。

Momentjs对象可变性导致DatePicker异常（React+Antd）以下是两段完全一样的代码，唯一区别是前者使用momentjs，后者使用dayjs：会发现前者的日期选择面板一打开日期就会疯狂增长，控制台重复报错：

Antd实现 JSON form + 动态表单 + 可编辑表格(JSON) + 全类型Tyescript提示现在的后台的项目大同小异，form + Table。写法也是很多种。要么封装太厚，要么联动不好用，要不ts类型不齐全。因为后台表单场景还是千奇百怪的。用别人的未必通用遇到问题没法调整，所以最好是自己实现方便修改。这里就用最简单的代码实现下。

你也能成为ElementPlus,Ant-design开源贡献者这里主要介绍如何快速参与开源项目的方式，一般头次参与开源，都有畏难情绪，怕被拒绝，怕自己写的不规范。实际操作下来，社区还是挺包容的。

抽离ant-design后台的公共查询设置公司后台使用 antd 搭建，查询的大部分页面有相同的查询条件，于是想抽出公共部分查询条件配置，省的一通复制

解决@ant-design/icons导致的样式异常在使用antd+tailwind时通常会使用layer模式此时layer的顺序会非常重要决定了样式的覆盖情况

前端风云志

Ant Design如何自定义输入框（Input）组件样式今天接到一个需求，需要自定义一个Input输入框，我们的项目使用React + Ant Design进行开发，按理说Ant Design已经提供了非常丰富的组件样式，但有时候还是无法满足特定的需求，比如我们的输入框要求渲染成下面的样子而Ant Design的Input组件默认的渲染结果是这样的。