Ant Design 6.4.3：几个让人踩坑的细节终于修了

预计阅读时间：7 分钟

Ant Design 近期发布了 6.4.3，这是一个纯修复版本，没有新功能，但修的几个问题恰恰是日常开发中容易踩到的"小坑"——占位符莫名消失、空元素悄悄渲染、搜索框行为异常。这类问题往往不影响功能主流程，却会让页面看起来不够专业，排查起来也费时间。

下面逐个看看这次修了什么，以及在项目中如何验证和规避同类问题。

RangePicker 占位符消失：语言包的"单复数"陷阱

问题：当你为 DatePicker.RangePicker 配置自定义语言包时，如果只定义了 placeholder（单数形式），而没有同时定义 startPlaceholder 和 endPlaceholder（复数/拆分形式），RangePicker 的两个输入框占位符会直接为空，用户看到两个光秃秃的输入框。

根因：RangePicker 内部优先读取拆分形式的占位符 key，找不到就 fallback 到单数形式，但 fallback 逻辑在 6.4.3 之前的版本中存在断裂，导致最终渲染为空字符串。

修复后，fallback 链路完整：先找 startPlaceholder / endPlaceholder，找不到再回退到 placeholder。

实际配置语言包时，建议同时提供两种形式，避免依赖 fallback：

import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

// 自定义语言包——同时提供单数和拆分形式，最稳妥
const customLocale = {
  lang: {
    placeholder: '请选择日期',
    startPlaceholder: '开始日期',   // ← RangePicker 优先读这个
    endPlaceholder: '结束日期',     // ← 以及这个
    rangePlaceholder: '选择日期范围',
  },
};

function DateRangeDemo() {
  return (
    <DatePicker.RangePicker
      locale={customLocale}
      style={{ width: 300 }}
      onChange={(dates) => {
        if (dates) {
          console.log('选中范围:', dates[0]?.format('YYYY-MM-DD'), '~', dates[1]?.format('YYYY-MM-DD'));
        }
      }}
    />
  );
}

如果你之前的语言包只写了 placeholder，升级到 6.4.3 后 fallback 会正常工作，但显式写明拆分形式仍然是更可靠的做法。

Result 组件：没传 title 却渲染了空 DOM

问题：Result 组件在不传 title 属性时，仍然会在 DOM 中渲染一个空的 .ant-result-title 元素。视觉上可能不明显，但会带来两个隐患：

无障碍问题：屏幕阅读器可能读到"标题：空"，影响可访问性。
样式干扰：空元素占据垂直间距，导致布局与预期不符。

修复后，title 为空时不再渲染该元素。

验证方式很简单——对比升级前后的 DOM 结构：

import { Result, Button } from 'antd';

// 场景：只用 Result 展示图标和操作按钮，不需要标题
function NoTitleResult() {
  return (
    <Result
      status="warning"
      subTitle="当前操作需要管理员权限，请联系管理员"
      extra={<Button type="primary">联系管理员</Button>}
    />
  );
}

升级前，浏览器 DevTools 中你会看到 <div class="ant-result-title"></div> 空标签；升级后，这个标签不再出现。

小建议：如果你的业务场景确实不需要标题，升级后可以放心省略 title；如果之前为了"撑开间距"故意不传 title，升级后可能需要用 style 或 className 手动补间距。

Select 搜索框的异常行为

摘要中提到了 Select 搜索输入框的修复（信息被截断），但从近期 issue 趋势看，这类问题通常涉及：

搜索模式下，输入框焦点丢失或无法正常输入中文
搜索值在某些交互后未被正确清空

升级后建议重点测试以下场景：

import { Select } from 'antd';

function SearchSelectDemo() {
  const options = [
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'angular', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
  ];

  return (
    <Select
      showSearch
      options={options}
      placeholder="搜索框架"
      style={{ width: 240 }}
      filterOption={(input, option) =>
        (option?.label as string).toLowerCase().includes(input.toLowerCase())
      }
      // 重点验证：选中后搜索文本是否正确清空
      onChange={(value) => console.log('选中:', value)}
    />
  );
}

验证步骤： 1. 输入搜索关键词（如 "re"），选中 "React" 2. 确认选中后搜索框文本清空、下拉关闭 3. 再次打开下拉，确认搜索框为空、全部选项正常展示 4. 尝试输入中文搜索，确认拼音/汉字输入法不触发异常过滤

升级实操与排查清单

6.4.3 是 patch 版本，按语义化版本规范，不存在破坏性变更，可以直接升级：

# 升级到 6.4.3
npm install antd@6.4.3

# 或指定精确版本，避免浮动
npm install antd@6.4.3 --save-exact

升级后建议跑一遍以下检查：

检查项	关注点
RangePicker 占位符	自定义语言包的 placeholder 是否正常显示
Result 无标题场景	DOM 中是否还残留空 `.ant-result-title`
Select 搜索	选中后搜索文本清空、中文输入法兼容
全局回归	patch 版本风险低，但涉及表单组件的页面建议手动过一遍

如果你的项目用了 antd 的国际化包 @ant-design/intl 或自定义 locale 对象，这次升级收益最大——RangePicker 的占位符问题很可能已经困扰过你的用户，只是没被上报。

Ant Design 6.4.3：几个让人踩坑的细节终于修了

RangePicker 占位符消失：语言包的"单复数"陷阱

Result 组件：没传 title 却渲染了空 DOM

Select 搜索框的异常行为

升级实操与排查清单

相关推荐

建议反馈