更新日志 - 3.0.0 - 《Ant Design of React v3.25.3 组件文档》

3.0.0

3.0.0

2017-12-04

更多内容见 Ant Design 3.0 发布公告。

主要变化

全新的色彩系统，组件主色由『#108EE9』改为『#1890FF』，新主色我们称之为『拂晓蓝』。
全新的视觉样式和组件尺寸，更现代更美观。
基础字体大小由 12px 增大到 14px。
默认语言由中文改为英文。
全面支持 React 16。
更友好的 TypeScript 支持。
新的 List 组件。
新的 Divider 组件。
新增 30 个图标。

⚠️ 升级必读

如果你从 2.x 升级到 3.x，建议直接升级到 3.x 的最新版本。
3.x 后续的版本可能已经废弃了一些下面没有提到的改动，请参考控制台的警告提示相应升级。
建议同时升级 React 到 16 或更新版本，以获得更好的性能和更完善的支持，升级方式见官方发布文档。
最后请参照下面的不兼容改动进行升级。

不兼容改动

此版本有部分不兼容的改动，升级时确保修改相应的使用代码。另外由于人肉查找代码中的废弃用法过于低效，所以我们提供了 antd-migration-helper 用于扫描代码中的废弃用法。

Card 的 noHovering 属性重命名为 hoverable，且默认值改为 true。
调整了 Grid 的响应式断点值。详见 #7230
Form getFieldDecorator 的 exclusive 参数被移除，此类场景应该由 Radio.Group、Checkbox.Group 之类的组件来完成。
新增 Form.createFormField 方法，mapPropsToFields 返回的字段都需要由该方法创建。

import { Form } from 'antd';
Form.create({
  mapPropsToFields() {
    return {
-     name: { value: 'antd' },
+     name: Form.createFormField({ value: 'antd' }),
    };
  },
})

优化了全局的重置样式，如果升级后你的全局样式有问题，可以引入我们提供的 2.x 兼容样式。

import 'antd/es/style/v2-compatible-reset';

或者在 less 里引入

@import '~antd/es/style/v2-compatible-reset.less';

由于默认语言改为英文，如果你需要显示中文，现在需要配置 LocalProvider。

import { LocaleProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
ReactDOM.render(
  <LocaleProvider locale={zhCN}>
    <YourApp />
  </LocaleProvider>,
  document.getElementById('root'),
);

Form 下的表单控件不再默认为 size="large"。
Input.Search 默认的 🔍 图标只作为装饰，不再响应用户交互。需要添加可交互按钮请使用 enterButton。
UMD 版本的 dist/antd.js 不再包含 moment，使用的时候需要自己引入 moment。

<html>
  <head>
+   <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
    <script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
  </head>
</html>

以下在 2.x 中废弃的特性被移除

🗑 移除了 DatePicker.Calendar，请直接使用 Calendar 组件。
🗑 移除了 DatePicker 的 toggleOpen 属性，请使用 onOpenChange 代替。
🗑 移除了 Form 的 inline、horizontal、vertical 属性，请使用 layout 代替。
🗑 移除了 Select 的 multiple、tags、combobox 属性，请使用 mode 代替。
🗑 移除了 Input 对 type='textarea' 的支持，请直接使用 Input.TextArea 组件。
🗑 移除了 Mention 的 toEditorState 方法，请使用 toContentState 代替。

新增功能及改进

🌟 Tabs 新增 size="large"。
🌟 Row 的 gutter 属性新增响应式断点的支持，可以使用诸如 gutter={{ sm: 16, lg: 32 }} 的设置。
🌟 Spin 新增 indicator 属性，用于设置自定义的加载指示符。#7977 @kossel
🌟 Input.Search 新增 enterButton 用于设置自定义的搜索图标。#7596
🌟 Mention 新增 placement，用于设置下拉框的弹出方向。
🌟 Carousel 新增 next()、prev()、goTo(slideNumber) 方法，用于控制面板展示。
🌟 Button 新增链接支持，当提供 href 时会自动渲染为 <a>。#8343
🌟 Steps 进行了重构，首次渲染的时候不会再闪烁。#6010
🌟 Switch 新增 loading 属性，用于表现加载中的状态。
Menu
- 🌟 我们使用了 rc-trigger 重构了菜单以支持延迟加载和窗口边缘浮层自适应方向。
- 🌟 新增 subMenuOpenDelay 和 subMenuCloseDelay，用于设置子菜单打开和关闭的延迟。
- 🌟 新增 forceSubMenuRender，用于强制渲染子菜单。#5586
Form
- 🌟 新增显示验证信息时的动画效果。
- 🌟 新增按条件渲染表单项的支持。#react-component/117
Message
- 🌟 duration 允许可选 #7857 @monkindey
Badge
- 🌟 新增 offset 属性，用于设置状态点的位置偏移。
- 🌟 status 允许与 children 同时使用。#8164
Card
- 🌟 新增 inner 类型。例子。
- 🌟 新增 cover、actions 以及 Meta 子组件。例子。
DatePicker
- 🌟 新增 mode 和 onPanelChange，用户控制面板的展示模式。例子。
- 🌟 新增 WeekPicker 子组件。例子
- 🌟 新增 dateRender 属性，用于自定义日期单元格的渲染。
TimePicker
- 🌟 新增 hourStep、minuteStep、secondStep，用于设置时间步长。例子
- 🌟 新增 focusOnOpen，用于设置在打开面板的时候是否聚焦输入框。
Table
- 🌟 新增 components 属性，用于覆盖表格元素的默认标签。

// 支持覆盖的元素
const components = {
  table: MyTable,
  header: {
    wrapper: HeaderWrapper,
    row: HeaderRow,
    cell: HeaderCell,
  },
  body: {
    wrapper: BodyWrapper,
    row: BodyRow,
    cell: BodyCell,
  },
};
<Table components={components} columns={columns} data={data} />;

🌟 新增 onRow 属性，用于设置表格列的属性。

🌟 新增 onHeaderRow，用户设置表格头部列的属性。

🌟 新增 column[onCell]，用户设置单元格的属性。

🌟 新增 column[onHeaderCell]，用于设置头部单元格的属性。

🌟 新增 column[align]，用于设置列内文字的对其方向。

🌟 新增 column[defaultSortOrder]，用于设置列的默认排序。#8111 @megawac

🌟 新增 rowSelection[fixed]，用于固定选择列。

🙅 废弃 getBodyWrapper，请使用 components 属性代替。

🙅 废弃以下属性 onRowClick，onRowDoubleClick、onRowContextMenu、onRowMouseEnter、onRowMouseLeave，请使用 onRow 代替。

<Table
  onRow={record => ({
    onClick: () => {},
    onDoubleClick: () => {},
    onContextMenu: () => {},
    onMouseEnter: () => {},
    onMouseLeave: () => {},
  })}
/>

Select
- 🌟 默认和多选模式下 Option 的值允许使用 number。
- 🌟 新增 maxTagCount 和 maxTagPlaceholder，用于设置最多可显示的选中项。
- 🌟 新增 showAction，用于设置出发下拉框打开的事件。
- 🌟 新增 onMouseEnter 和 onMouseLeave 事件回调。
LocaleProvider
- 🇮🇸 新增冰岛语。#7561 @paunovic-stefan
- 🇪🇬 新增埃及语。#7888 @mohamed-seada-1994
- 🇺🇦 新增乌克兰语。#8169 @anxolerd

Bug 修复

Form
- 🐞 修复输入框的图标会被验证图标覆盖的问题。
- 🐞 修复使用大尺寸输入框时，验证图标不居中的问题。
🐞 修复 Menu 按键时的报错。#8089

其他

在 TypeScript 中使用时不再需要设置 allowSyntheticDefaultImports。
从 peerDependencies 中移除了 react@0.14 和 react@15，虽然目前 antd 3.0.0 依然可以在旧版本的 React 上使用，但是我们在未来有可能使用 React 16 的新特性，所以强烈建议升级到 React 16，见升级文档。
全面支持 ES Module ，antd 及其依赖的底层 react-component 组件全部提供了 ES Module 的构建版本，如果你使用 webpack 3，可以把 babel-plugin-import 的 libraryDirectory 设置为 es，以获得 Tree Shaking 的优化效果。
最后，我们会继续维护 2.x 的分支到明年 6 月份。