Ant-design: 💥Ant Design 4.0正在进行中！

创建于 2019-05-31  ·  182评论  ·  资料来源: ant-design/ant-design

预览网站

下一个蚂蚁设计

回顾

自2017年月了。 我们修复了许多错误，并在4289次提交，138个发行版，7675个问题和PR中添加了许多新功能（ changelog ），这使我们在GitHub上获得了25375星。 我们还发布了Ant Design Pro 4.0 。 支持TypeScript，块和布局抽象。 我们要感谢所有贡献者，您的贡献使Ant Design越来越好。

同时，我们发布了Ant Design Pro 4.0。 支持TypeScript，阻止并提供布局组件。

此刻，我们正在思考：好吧，接下来是什么？ 我们该怎么做才能使Ant Design进一步发展？ 现在是时候为Ant Design 4.0计划了！ 🍻

以下是有关4.0的详细计划。 由于我们仍在计划中，因此我们可能会对其进行一些调整。

🌓关于兼容性

我们将在4.0中删除不赞成使用的道具，这意味着不再支持不赞成使用的道具。 如果您没有收到来自最新3.x版本的任何警告，则可以无缝升级。 否则，在4.0发布之后，将有3.0的半年维护阶段。

我们知道升级很麻烦。 我们正计划提供兼容的软件包来处理此问题：

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

该软件包将一直可用到3.x维护阶段结束。

使用最新的React API

我们长期以来一直提供React 15支持。 但是，由于React具有很强的兼容性，因此似乎不需要社会反馈（关于React 15的问题几乎占0％）。 为了支持React 15，我们非常谨慎地使用新的API。 4.0之后将不再是问题：

  • 提供相关组件的Hooks API
  • 支持并发模式（仍在准备中，将在4.0中继续调整）
  • 拥抱React 17（哇！〜）

停止IE9 / 10支持

Ant Design 3.0花费很多精力来支持旧版IE 。 但是根据行业统计，随着Windows升级，IE9 / 10的使用率越来越低。 我们将在4.0中停止支持IE 9/10（但仍支持IE 11），这意味着将可能支持较新的浏览器功能。

其他兼容更新

  • 少2.x升级到少3.x
  • 图标调整
  • 提及已弃用

📦缩小尺寸

优化图标大小

我们在[email protected]之后使用svg图标（为什么要使用svg？ ）。 我们使用字符串名称来映射图标，该图标无法按需加载。 我们将所有图标文件导入到antd中，这会使包大小变大。 我们将在4.0中处理。

旧图标的使用方式将被*不推荐使用*：

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

在4.0中将改为使用导入单个Icon：

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

您仍然可以以旧方式使用兼容方式。

删除Draft.js

我们在Mention组件中使用Draft.js来确认弹出位置，但是仅使用了其中的一小部分功能。 似乎超出成本。 我们计划在4.0中删除Draft.js，并改用其他简易解决方案。 同时，为了与3.0中的Origin Mention组件区分开，将引入一个新的组件Mentions以避免api冲突。 另外，它支持兼容方式：

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭性能优化

对于来自社区的大数据集，我们很少遇到性能问题。 我们将确保在此处进行一些优化。

虚拟滚动

虚拟滚动是进行性能优化的常用方法。 我们计划在组件中本地支持此功能。 它可能不会在4.0版本中立即完成。 将逐步整合。

重构动画

过去我们对动画做了一些修改。 在大多数情况下，它运作良好。 我们计划使用更纯的React方法，而不是hack方法。 此更新将保持沉默，不会影响您。

🧩组件优化

我们在3.0中添加了许多组件，并将在4.0中继续。 这些组件将来自业务场景，Ant Design Pro和社会需求。 新的组件过程与Ant Design 3.0相同，我们将相关的设计文件放入PR中，并将其收集在官方网站上。 在每个次要版本中发行。

此外，我们计划重构一些关键组件以使其易于使用。 包括但不仅限于：

形成

表单是使用最多的组件之一。 我们注意到，社交对API设计有很多评论。
我们希望简化4.0中的API：

  • 表格将包括数据存储。 无需再使用Form.create() 。
  • Fom.Item将包含字段绑定。 无需再使用getFieldDecorator 。
  • Form.Item将保留该值，但删除字段时将禁用验证器。
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

在现实世界中，我们遇到了表单之间的许多交流（通常是详细的配置）。 我们希望使它更容易：

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

如果要关注表单进度，可以在此处查看。

表

过去，我们收到了许多表反馈。 我们知道，展开和滚动道具不能很好地配合使用。 这次，我们将重点修复它。 此外，我们将在表格优化方面做很多工作。 和简单的布局方法：

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

我们还计划添加摘要页脚以支持摘要行。

新的DatePicker

当前的DatePicker满足大多数要求。 但是，通过社区讨论，我们可以进行更多的挖掘。 我们将提供休息年选择器和巡游者选择器（讨论）。 而且，我们将更新DatePicker设计风格以增强用户体验。

🚀继续更新

除了上述内容外，我们还计划继续进行一些更新。 这些将在4.0中不断更新，以增强开发和用户体验。

🧶改善可及性

Ant Design 3.0对可访问性的支持有限，我们计划调整dom结构并添加更多的aria标记，以增强屏幕阅读器的体验。 此外，我们还准备优化键盘交互。

🎯开发人员API标准

我们发现某些API命名样式与其他样式几乎没有什么不同。 对于Typescript开发人员而言，这不是问题，但是很难记住。
因此，我们将创建一个包含当前API和相关命名规则的命名标准文档。 在新功能中，将遵循命名规则，以避免API命名冲突。 另外，我们欢迎社区对此发表意见。

💼反应严格模式

如果您尝试用<React.StrictMode>包装antd组件，则会收到警告。 我们已经用新的生命周期方法替换了某些组件。 这项工作将在4.0中继续。

💡改善开发人员体验

过去，我们发现某些问题反复出现。 这些问题某种程度上是使用问题。 我们认为我们可以对此做一些事情（实际上已经从3.0开始）。 在开发环境中，我们将警告意外状态（例如，无效的Moment对象，前缀/词缀调整导致dom结构更改等）。 我们认为，控制台是遇到问题时首先关注的地方。 提供适当的提示可以帮助发现问题。 同时，我们会将其他问题汇总到每个组件文档的FAQ中。 从维护方面来说，我们无法解决每个使用问题，但确实存在，特别是对于新来的开发人员。 常见问题解答可能有助于节省大量搜索时间。 如果您对此感兴趣，欢迎与我们一起帮助增强开发人员体验。

🐱 Design Resource

Ant Design is not only a component library. Design is the support power. We will sync update the design resource (Sketch component package, Kitchen tools, Design Token, etc.).  We will also adjust current component style to enhance user experience.

Milestones

Here is our milestones plan. We will create related issue on Github. And also welcome social contributor:

Q2

  • Mark related API as Deprecated and remove from document.
  • Low level component warn update.

Q3

  • Create antd 4.0 branch and update the document.
  • Components development.

Q4

  • Release Ant Design 4.0.

Welcome aboard

We will keep you posted during the developing process. Content above may not be final. Thought/advice from community will be more than welcome! Let's make Ant Design 4.0 better!

引言

Ant Design 于 17 年 12 月发布 3.0 以来，已经经历了 16 个月的时间。在此期间，我们修复了海量 Bug、以及增加大量新功能（更新日志）。提交了 4289 个 commits，发布了 138 个版本，关闭了 7675 个 issues 和 PRs，新增了 25375 个 stars。我们也发布了 Ant Design Pro 4.0。支持了 TypeScript、区块以及对布局进行抽象。我们想感谢各位社区志愿者，是你们的奉献使 Ant Design 变得更加好用。

与此同时，我们也在思考下一步是什么，如何才能使 Ant Design 走的更远，我们预计在今年 Q4 发布 Ant Design 4.0 版本。🍻

以下是关于 4.0 的详细计划，当然这仍在计划中。正式发布时可能会有调整。

🌓 兼容性调整

我们将在 4.0 中，对标记为 Deprecated 的属性进行移除。届时你将不能再使用废弃的方法。如果你将你的项目升级到最新的 3.x 于控制台中没有看到来自 antd 的 warning 信息，那么你升级 4.0 也将是无缝的。对于 3.x 版本，我们仍将在 4.0 发布后额外进行半年的维护工作。

我们知道升级版本舍弃废弃 API 的精力非常大，我们计划在发布 4.0 的同时也提供兼容包以协助项目过渡（相关 API 仍在设计中，正式发布时可能会有所不同）：

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

该兼容包同样会维持更新直到 3.0 维护工作停止为止。

使用最新版本 React API

我们相当长一段时间内都在支持 React 15 版本，但是从社区反馈上看，这其实并不重要（React 15 的 issue 数趋近于 0%）。因为 React 本身就具备非常健壮的兼容性。而为了支持 React 15，我们在开发过程中对于新的 API 使用非常慎重。在 4.0 版本后，我们会以最新 React 版本作为基准进行开发：

  • 提供相关组件的 Hooks 版本
  • 支持 Concurrent 模式（当然，需要准备的事情比较多，会在 4.0 发布中持续调整。）
  • 拥抱 React 17 （wow！~）

停止 IE9/10 支持

Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。然而根据业界统计，IE9/10 浏览器无论是在全球还是在国内份额都在随着 Windows 系统更新而在不断缩减。我们在 4.0 版本，会停止对 IE 9/10 的支持工作（但仍然会支持 IE 11）。这也意味着，支持新的游览器特性成为可能。

其他兼容性调整

  • Less 2.x 升级为 Less 3.x
  • Icon 使用变更
  • Mention 废弃

📦 减小体积

优化图标尺寸

在 [email protected] 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名设置图标的 API，在这种设计下我们无法做到按需加载，因而我们全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 4.0 中，我们将会对此进行调整以优化体积。

旧版 Icon 使用方式将被废弃：

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

4.0 中会采用按需引入的方式：

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

你将仍然可以通过上文兼容方法继续使用。

移除 Draft.js

我们在 Mention 组件中引入了 Draft.js 以实现下拉提示定位功能，然而我们只使用了它很小一部分的功能。从性价比上考虑，显得有些浪费。我们计划在 4.0 中移除对其的依赖，转而使用更轻量级的解决方案。同时，为了区分 3.0 中的 Mention 组件，我们会提供一个新的组件 Mentions 以防止 API 冲突。同样的，它也支持通过上文兼容方法来继续使用：

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 性能优化

在维护过程中，我们收到不少关于大数据的下的性能讨论。为此，我们也计划对性能进行优化。

虚拟滚动

虚拟滚动是一个常见的优化手段，但是在 Ant Design 中由于存在动画效果，使得自定义虚拟滚动并不那么容易。现在，我们计划带滚动的组件中原生支持虚拟滚动。当然，我们并不会保证在 4.0 发布时所有组件已经更新完成，会持续更新。

动画改进

过去，我们使用了一些 hack 的方式来对动画进行处理。大部分场景下，都工作的相当好。在 4.0 中，我们计划对此进行调整，摒弃 hack 的方式转向更加 React 的道路。该调整将会静默更新，你不需要对此做任何更改。

🧩 关于组件

在 3.0 中，我们已经持续添加了不少组件。在 4.0 中，我们仍将进行下去。这些组件将从我们的业务场景、Ant Design Pro 以及社区需求中进行提炼，这是一个持续的过程。新增组件的流程与 Ant Design 3.0 相同，我们会沉淀相关组件的设计稿在 PR 中展示并与官网进行更新，开发完成后会在每个月的 minor 版本中发布。

此外，我们还准备重构一些关键组件，以提高其开发与交互上的易用性。其中包含但不限于：

Form 组件

表单组件的受众群体十分庞大，我们也注意到社区对繁琐的表单 API 的抱怨，在 4.0 里我们希望探索更好的 API 形式以简化开发成本：

  • Form 将默认聚合表单数据域，你不再需要通过 Form.create() 创建上下文。
  • Fom.Item 将默认聚合表单字段，你不需要通过 getFieldDecorator 绑定 Field。
  • Form.Item 的值将总会保留，但是其验证功能只有表单项可见时才会生效。
const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

在现实场景中，我们遇到了多表单联动的场景（常见于详细化配置）。我们知道这使用起来并不方便，因而也将提供表单间联动的功能：

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

如果你想关注 Form 进度，欢迎查看进度。

Table 组件

在过去的版本中，我们接到了关于 Table 组件非常多的反馈。我们知道过去 Table 的 expand 和 scroll 属性一直不能很好的工作。这一次，我们会着力解决这方面的冲突问题。此外，我们还会进一步对 Table 组件进行性能调优。以及探索一些更加简易的表格布局方式：

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

此外，我们还计划添加 Summary Footer，以支持汇总需求。

DatePicker 重做

现有的 DatePicker 已经满足了大部分需求，但是从社区讨论来看。我们还有更加深入挖掘的机会，我们将补全剩余的年选择器以及对应的范围选择器（讨论）。此外，我们会调整相关日期时间选择器样式，进一步降低用户的认知成本。

🚀 持续更新

除了以上内容外，我们也计划一部分持续更新的内容。这会在 4.0 中保持跟进，以更好的提升用户开发与使用体验。

🧶 改进无障碍体验

Ant Design 3.0 中对于无障碍体验支持度稍显欠缺，为此我们计划调整组件结构并添加更多的 aria 标记以改进读屏体验。此外，我们还准备优化现有的组件键盘交互方式，以确保可以有更好的全键盘交互体验。

🎯 开发者 API 规范

在演进过程中，我们发现少量 API 风格会与其他组件显得格格不入。对于 TypeScript 用户而言这不是什么问题，但是对于其他用户而言，这会造成记忆困扰。

因此我们会整理出一份标准命名文档。该文档会包含现有的 API 列表以及恰当的命名规范。在新增功能时，也会依据该规范进行命名。以避免未来可能产生的 API 分歧。当然，我们也欢迎社区同学在 PR 中进行反馈。

💼 React 严格模式

如果你尝试在 antd 组件外包裹 <React.StrictMode> 你会得到不少来自 antd 组件的警告信息。我们在 3.0 时已经更新了一部分组件的生命周期方法。在 4.0 中，我们仍将继续。

💡 改进开发者体验

在过去的维护过程中，我们发现某些 issue 会往复的出现。这些 issue 常见于一些使用规范或者应用场景的问题。为此，我们决定在这边做出改进（其实从 3.0 开始，我们已经在改进了）。在开发环境中，我们对于一些意外情况（例如无效的 Moment 对象、Input 的 preffix/affix 动态调整导致的 Dom 结构变化等等）会在控制台进行提示。我们确信，控制台是开发者在遇到问题时首先会关注的地方，在此提供适当的提示可以帮助快速定位问题。同时，对于一些特殊的使用方式或者场景。我们会在相应的组件文档中提供 FAQ。从项目维护角度看，我们的精力无法针对使用方式的 issue 做详细的解答。但是这些疑问是现实存在的，尤其对于新人开发者而言，一个 FAQ 可以帮助节省大量搜索时间。如果你有兴趣，也欢迎社区志愿者帮助一起完善开发者体验。

🐱 设计资产管理

Ant Design 不仅仅是一套组件库，背后有着强大的设计体系作为支撑。我们在 4.0 会同步更新最新的设计相关资产（Sketch 组件包、Kitchen 工具集、Design Token 等等），以方便设计师以及对设计感兴趣的同学作为参考。也会对现有的组件设计样式进行微调，以提升视觉效果以及用户体验。

时间计划

以下是我们的时间安排，其中部分组件更新是持续进行的。我们会在 github 上建立相关 issue，也欢迎社区志愿者一同参与：

Q2

  • 将需要废弃 API 标记为 Deprecated 状态，并于文档中清除。
  • 底层组件进行预热。

Q3

  • 建立 antd 4.0 分支，并进行文档更新。
  • 底层组件开发。

Q4

  • 发布 4.0 版本。

欢迎参与

在 4.0 开发过程中，上述内容可能会有所调整。欢迎社区同学提供宝贵的想法和建议，让我们把 Ant Design 4.0 一起做的更方便好用！

4.x ✨ Announcement 🕙 Plan 🗣 Discussion
资料来源
picture zombieJ
👍261 🎉63 ❤59 🚀47 😄34 👀2

最有用的评论

15311

我们将替换版本4中的Moment.js吗？

picture hk-ng 于 2019-06-01
👍101 ❤13

所有182条评论

15311

我们将替换版本4中的Moment.js吗？

hk-ng picture hk-ng 于 2019-06-01
👍101 ❤13

很赞，迫不及待想升级了

lcoder picture lcoder 于 2019-06-01

V4 Alpha准备

主要目标

  • [x] v4分支
  • [x]兼容包装
  • [x]删除不推荐使用的内容

    • [x]提及成分

    • [x]新提及组件＃16532

    • [x] Form.create

    • [x]带有type ＃12011的图标

    • [x]其他带有过时的警告道具

  • [x]减v3
  • [x]成效

    • [x] rc-animate升级

    • [x]并发模式支持

    • [x]虚拟滚动动画支持

    • [x]虚拟卷轴

    • [x] rc组件

    • [x]树

    • [x]选择

    • [x] TreeSelect

    • [x]表格： https ：

    • [x]提供挂钩版本

    • [x]表格

    • [] templateAreas

    • [x]支持expand和scroll合作

  • [x]带有新设计的DatePicker

    • [x] YearPicker

    • [x] RangePicker.YearPicker

    • [x] RangePicker.MonthPicker

    • [x] RangePicker.YearMonthPicker

    • [x] RangePicker.WeekPicker

    • [x] TimePicker.RangePicker

继续目标

  • []辅助功能
  • [x] API标准
  • [] React.StrictMode
afc163 picture afc163 于 2019-06-01
👍1

以下是有关Ant 4的一些建议

大约templateAreas

templateArea在运行时解析字符串，在字符串输入错误时将导致异常的解析错误或倾斜错误。 运行时解析对TypeScript也不友好。 蚂蚁团队会考虑以下提议吗？

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

关于依赖

蚂蚁团队会考虑消除对moment依赖吗？

Moment对于前端项目来说太大了，有很多选择，但是TimePicker和DatePicker的道具在Moment上传递。 这导致我们无法用date-fns或其他小于Moment的库替换moment 。

关于图标

我认为不应弃用现在使用的Ant图标的方式，当我添加或删除一个Icon时，导入图标的新方式可能会导致常见的捆绑销售商品更改。

蚂蚁团队可以提供两种使用蚂蚁图标的方式：

  1. 将所有图标打包到一个jsfile中，开发人员可以使用<script>标签导入整个文件，并在webpack中设置externals 。
  2. 上面介绍的新方法。

这是我对Ant4的一些建议

关于templateAreas

templateAreas在运行时对串行进行解析，当字符串出现拼写错误时，可能会导致解析失败或静默错误。运行时解析对TypeScript也不友好。Ant团队是否考虑如下方案：

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

关于依赖

是否考虑移除对Moment的依赖？

Moment对于前端项目来时实在是太大了，市面上有很多替代品的库，但是TimePicker和DatePicker的参数依赖于Moment对象，这导致了我们没办法使用date-fns或者一些比Moment更小的库来替代Moment。

关于图标

我认为当前使用蚂蚁图标的方式不应该被废弃。新的使用方式在我新增或者删除一个图标引用的时候，可能会导致公共块反复变更。

Ant团队可以提供如下两种方案来使用Ant图标：

  1. 打包所有图标到一个js文件中，开发者通过<script>标签引用全部图标，并且在Webpack中设置为externals
  2. 4.0新介绍的图标使用方式
jas0ncn picture jas0ncn 于 2019-06-01
👍47

有计划支持表的虚拟滚动吗？ 在某些情况下，最好使用无限表而不是分页。
3.11中包含“注释”，也许是ChatBox和ChatMessage？

ifiknew picture ifiknew 于 2019-06-02
👍10

有计划支持表的虚拟滚动吗？ 在某些情况下，最好使用无限表而不是分页。
3.11中包含“注释”，也许是ChatBox和ChatMessage？

UserInfo可能是优先事项。

jas0ncn picture jas0ncn 于 2019-06-02

about templateAreas

我同样支持二维数组的语法
I also support the syntax of two-dimensional arrays.

关于 templateAreas ，这里给出一个静态检查的示例
This is an example of a type static check using ts for templateAreas

interface Cell<T extends string = string> {
  key: T;
  title: string;
}

interface Config<K extends string = string> {
  header: {
    templateAreas: ReadonlyArray<ReadonlyArray<K>>;
    cells: ReadonlyArray<Cell<K>>
  };
}


declare function check<T extends string>(config: Config<T>): void;

const config = {
  header: {
    templateAreas: [
      ['name', 'address', 'address'],
      ['name', 'building', 'error'],
    ],
    cells: [
      { key: "name", title: "Name" },
      { key: "address", title: "Address" },
      { key: "building", title: "Building" },
      { key: "no", title: "No" }
    ]
  }
} as const;

check(config);

Playground

image

muzea picture muzea 于 2019-06-02
👍3 🚀1 😕1 🎉1 😄1

赞

Huanglei2010 picture Huanglei2010 于 2019-06-03

15311

我们将替换版本4中的Moment.js吗？

我认为，离开moment的主要问题是在locale s附近打破变化。 https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

zachguo picture zachguo 于 2019-06-04

希望对typescript的支持能更好点

fwh1990 picture fwh1990 于 2019-06-05
👎2

很高兴看到4.0正在开发中！ 我在下面提出一些建议供考虑，我不确定它们是否适合设计模式，但就可定制性而言，我认为它们会很好。

  • 能够控制<Table>内的行的背景颜色。 例如，将一行着色为橙色以突出显示该行的警告。
  • 按钮的颜色，以前没有找到有关此的讨论。 但是，能够拥有与Buttons的<Tag color="red">RED<Tag />类似的API，例如<Button color="red">Red Button<Button/> ，这将是很棒的。
  • 支持不同组件中的Font-Awesome 5.x图标，或确保它们将与正在进行的其他Icon工作。 我注意到在使用FA而不是本机<Icon>组件时，对齐存在一些问题。
  • <Pagination>组件不支持直接提供页面数量，用例是例如我只有页面数量和当前页面可供我使用，但每个页面中没有多少项目。 我还没有找到解决这个问题的好方法。
orecus picture orecus 于 2019-06-05

@ore​​cus

例如，将一行着色为橙色以突出显示该行的警告

我倾向于使用rowClassName将类附加到该行，然后使用CSS覆盖默认样式。

的组件不支持直接提供页面量

可以通过假的总数。 例如，如果要50页，可以传递total = pageSize * 50 。

muzea picture muzea 于 2019-06-05

确实是个好消息🚀关注性能是可见的，这非常好，因为某些组件不能与大量数据一起使用。

您想如何实现虚拟滚动？ 使用react-window吗？

主要目标功能是否有优先级？
我想在alpha阶段尝试虚拟选择，我想我并不孤单。

谢谢。

bend-up picture bend-up 于 2019-06-05
👍6

为什么不能按需加载字符串名称？ 不反应的lazy（）解决了问题？

faradaytrs picture faradaytrs 于 2019-06-06

@faradaytrs
可以是可以，但是依赖 webpack 的特性，具体操作

两个问题比较突出

  • /* webpackChunkName: "icons/icon-" */ 这种写法是 webpack 提供的 Magic Comments
  • 如原文所说 "每一个图标都包含了除图标内容以外的额外的 Webpack 模块信息"
muzea picture muzea 于 2019-06-06
👎1

关于全球风格污染有什么想法吗？ ＃4331＃9363

wangjianio picture wangjianio 于 2019-06-09
👍30 😕3

关于全球风格污染有什么想法吗？ ＃4331＃9363

恕我直言，对于4.0，允许用户在全局名称下定义antdesign样式将是一件好事（请参阅我的评论https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487）

abenhamdine picture abenhamdine 于 2019-06-09
👍6

很高兴听到下一个里程碑！

我的2克拉关于文档和简化：

经常有一些传递给底层DOM元素的道具，但没有记录（IIRC在某些情况下，会传递组件实现未选择的所有道具）。 将它们记录下来，并按目标元素分组（这可能不止一个），这将非常有帮助：“以下道具传递到容器中

”或“以下道具通过元素...”或“所有其他道具都传递给...”。由于这些道具不需要详细说明，因此指向MDN的链接就足够了。

对于我们TypeScript开发人员来说，这样的更改也将是巨大的，目前，在这方面保持TS定义的最新状态是一项繁琐的工作。

在“开发人员API标准”中，应对此进行记录，并应确定应始终传递哪些道具（className，id 、?）

sbusch picture sbusch 于 2019-06-11

另一个问题：

您是否打算将更多文件（甚至rc组件）从具有TypeScript定义的JavaScript切换到本机TypeScript？

sbusch picture sbusch 于 2019-06-11

考虑用更灵活的东西（例如Formik）代替rc-form。

iamvanja picture iamvanja 于 2019-06-12
👎7 👍6

给维护者的问题：

我的团队有兴趣尝试使用Ant，但是https://github.com/ant-design/ant-design/issues/11097（Antd Less会造成全局JavaScript泄漏）阻止了我们。 上面的路线图表明，Ant将迁移到LESS版本3，并且我读到有问题的不安全，已弃用的嵌入式JavaScript功能默认情况下处于禁用状态。 这是否意味着Ant版本4将不再具有LESS问题？

kaiyoma picture kaiyoma 于 2019-06-15
👍5

不仅IE9 / 10，而且停止IE支持，

wanliyunyan picture wanliyunyan 于 2019-06-19
👍6 🎉5 😄5 👎4

哦，天哪，不污染全局样式（ html ， body ， *::before ，...）会很有用。

and-semakin picture and-semakin 于 2019-06-20
👍10

基于react-slick的carousel用起来出现不少问题，建议新版可以换另外一个库
react-pannable用起来挺不错的

cztflove picture cztflove 于 2019-06-26
👎1 👍1

@cztflove 这个库的 commits 描述 全是no message 😃 , 而且社区关注度过低，应该不会考虑吧。

yoyo837 picture yoyo837 于 2019-06-26

@yoyo837 主要这个组件是新出的吧，所以关注度比较低，但是它支持 virtual list 还有 仿ios边缘弹性 ，基于这个组件还能实现一些 拖拽 功能🤔 后续有比较大的扩展空间

cztflove picture cztflove 于 2019-06-26
👍2

我们不应该迁移到一种通用语言吗？

我完全同意并尊重当地语言，即使我不是英语母语人士。 有100项重复的任务，或者说用双语言说的更好的重复任务，最重要的因素是时间，翻译讨论的字符串，从文档中学习或学习。 演示等

我必须承认，由于语言冲突，人们并不缺乏贡献者，但仍有数百人不敢参与其中。 已经有许多冲刺，翻译的问题仍在继续，但我要求的是，通过此主要版本完全迁移到一种通用语言，以减少我们所有人之间的

asharamseervi picture asharamseervi 于 2019-06-29
👍8 😕1

我们不应该迁移到一种通用语言吗？

我完全同意并尊重当地语言，即使我不是英语母语人士。 有100项重复的任务，或者说用双语言说的更好的重复任务，最重要的因素是时间，翻译讨论的字符串，从文档中学习或学习。 演示等

我必须承认，由于语言冲突，人们并不缺乏贡献者，但仍有数百人不敢参与其中。 已经有许多冲刺，翻译的问题仍在继续，但是我要求的是，通过这一主要版本来完全迁移到一种通用语言，以减少我们所有人之间的沟通差距。

说得对，专心说中文吧

faradaytrs picture faradaytrs 于 2019-06-30
👍2

给维护者的问题：是否计划使用CSS var即时更改颜色和样式主题？

我在实践中了解到，通过变量更改组件样式是一种非常舒适的方法。 我试图用var(--css-vars)重写Less变量，但是我在样式编译中遇到了很多错误，这是因为很多样式使用vars函数和运算，而不仅仅是值。 我认为这是一项艰巨的任务，并且这种方式可以创建重大更改，但是已经创建了主要版本来进行重大更改:)并且用法CSS vars可以为组件样式的自定义提供很多机会。

您对此有何看法？ 无论如何，我计划使用CSS vars作为pull request开发主题，因为在我的项目中需要此功能（动态更改主题）。

抱歉，如果该建议重复，但在其他问题和PR中我没有发现任何建议。

Z3SA picture Z3SA 于 2019-07-02

@ Z3SA https://caniuse.com/#search = CSS％20变量。 这需要停止所有IE支持，停止IE11支持太激进，尽管我也支持这样做。

yoyo837 picture yoyo837 于 2019-07-02

@ yoyo837 ，我同意这是IE支持问题的根本原因。 但是Ant Design也得到Electron（作为独立平台，而非Web）的官方支持（如ant.design所述）。 可能是在这种情况下，有一种方法可以创建两个主题：一个具有Less vars，另一个具有CSS vars。 但是似乎很难支持。

因此，我想提出的另一种可能的策略是-在Less中为所有可自定义属性创建Less var，或删除Less vars下任何函数和操作的使用，任何开发人员都可以将其用作其CSS var的条目。 或者说得更简单-仅将Less vars用作值容器，而不用于函数和操作。

Z3SA picture Z3SA 于 2019-07-02

如果仅支持主流浏览器，我相信代码的大小将更小，并且代码也将更易于维护。

wanliyunyan picture wanliyunyan 于 2019-07-03
👍2

不仅IE9 / 10，而且停止IE支持，

@wanliyunyan太破了。 一些开发人员可能坚持使用antd @ 3 ，这对我们来说不是一件好事。

dancerphil picture dancerphil 于 2019-07-03

@ Z3SA这将是一项巨大的工作。

yoyo837 picture yoyo837 于 2019-07-03

@dancerphil幸运的是，我只为我的项目考虑chrome的最新版本。 😃因此，我希望尺寸越小越好。

wanliyunyan picture wanliyunyan 于 2019-07-03

@ yoyo837我知道。 如果这个想法不能引起足够的重视，我会自己做。

Z3SA picture Z3SA 于 2019-07-03

我们是一家愿意通过使用单个组件逐渐迁移到antd的公司； 但是，蚂蚁使用Global样式确实使这个问题复杂化。 请停止污染全局样式。

jmackay-hippocmms picture jmackay-hippocmms 于 2019-07-06
👍6

表单是使用最多的组件之一。 我们注意到，社交对API设计有很多评论。 我们希望简化4.0中的API：

Fom.Item将包含字段绑定。

这些更改是否仍将允许我们将Form.Item用作严格的呈现组件？ 我喜欢antd的组件，但是我更喜欢使用react-final-form进行状态管理。 我想要Form.Item的样式，而没有状态管理逻辑。

jmackay-hippocmms picture jmackay-hippocmms 于 2019-07-06
👍3

分支4.0已创建。 我什么时候可以预览

jeessy2 picture jeessy2 于 2019-07-10

新的表单组件很棒！

fxxjdedd picture fxxjdedd 于 2019-07-16
👍4

请使用dayjs替换momentjs，因为momentjs很大，而且捆绑包的大小也变得很大。

ViktorAksionov picture ViktorAksionov 于 2019-07-17
👍24

有考虑接手富文本编辑器的坑吗

XUANLANcognition picture XUANLANcognition 于 2019-07-18

发售日期是几点？

rafaelodassi picture rafaelodassi 于 2019-07-19

@rafaelodassi目前尚未确定日期，但可能在第四季度。

ztplz picture ztplz 于 2019-07-21
🎉1

优先升级到@babel/runtime@7和core-js@3 。

afc163 picture afc163 于 2019-07-22
🎉3

不是v3吗？ core-js@4有什么消息吗？

yoyo837 picture yoyo837 于 2019-07-22
😄1

每个人都在谈论完全删除IE支持，因为统计数据表明它几乎没有被使用。 Intranet背后的数百万企业用户如何进行统计呢？ 由于公司政策的原因，它们只能使用IE10和IE11。

如果放弃IE11支持，我将坚持使用antd @ 3 。 IE10的降级可以被大多数客户接受，因为MS不再支持它，并且公司PC已更新为IE11。

filipjnc picture filipjnc 于 2019-07-23
👍10 👎4

我建议引入一种API，以允许将对象用作<Select/>值。
有关详细信息，请参见https://github.com/ant-design/ant-design/issues/13485

cc @zombieJ

SergeyVolynkin picture SergeyVolynkin 于 2019-07-25

建议每一个组件有也有自己的更新日志，放的隐蔽一些也没关系，个人建议~

redclown picture redclown 于 2019-07-27
👍1

大概什么时候能Release或者RC呢？

fwh1990 picture fwh1990 于 2019-07-27
👍1

建议每一个组件有也有自己的更新日志，放的隐蔽一些也没关系，个人建议~

同意，每个组件的文档能否顺带添加上是哪个版本加入的。不然看到文档，还能看看当前版本能不能用，是否要更新依赖。

Sent with GitHawk

jas0ncn picture jas0ncn 于 2019-07-28

@ fwh1990 @ jas0ncn @redclown
在英语上）

akaguny picture akaguny 于 2019-07-29
👍7

保留为英语频道，谢谢〜

ztplz picture ztplz 于 2019-07-30
👍2

4.0 alpha已发布。 太棒了。 来吧兄弟

发布测试版后，我将重构我的项目

fwh1990 picture fwh1990 于 2019-07-31
👀1

antd的默认主题很漂亮，但也可以更好。
为了提高可读性，请考虑增强对比度并使用更大的文本。

有很多文章和工具。
https://www.google.com/search?q=web+可读性

Airkro picture Airkro 于 2019-08-01
❤1

最好提供一个脚本，以将antd v3迁移到v4。

在biz项目中，它存在太多的表单组件。 将antd v3迁移到v4将花费太多时间。

react-relay团队做了类似的事情。
如果要将react-relay v3迁移到react-relay v4 Realease ，则需要修改许多文件。
因此，他们使用jscodeshift编写了迁移脚本，因此react-relay用户可以轻松地将react-relay v3迁移到v4。

xyy94813 picture xyy94813 于 2019-08-01
👍2

我觉得很难改写某些样式。 那么，如果有改善的计划？

我个人更喜欢使用CSS-in-JS，它非常灵活并且非常适合React。

FuJuntao picture FuJuntao 于 2019-08-02
👍5

4.0 alpha下在使用class component时，无法获取form实体，https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn 这个链接下的示例代码无法实现，formRef中不存在实体方法

解决了，在

Kwei9 picture Kwei9 于 2019-08-06

@Kwei9 , 能开个 issue 附上重现不？我看一下哈

zombieJ picture zombieJ 于 2019-08-06

@Kwei9 , 能开个 issue 附上重现不？我看一下哈

ref写法换成这样解决了

Kwei9 picture Kwei9 于 2019-08-06

我认为现在是解决全球污染问题的时候了！ 这使得它不得不与其他应用程序一起使用antd！

ChuckJonas picture ChuckJonas 于 2019-08-07
👍16 ❤4 👎1

Moment对于前端项目来说太大了，有很多选择，但是TimePicker和DatePicker的props依赖Moment。 这导致我们无法取代时刻...

@ jas0ncn嗨，请考虑用dayjs替换momentjs（2kb的替代方法）。 这些已经是使用Day.js https://github.com/iamkun/dayjs/issues/529在Ant Design（Antd）中替换Moment.js的经过测试的问题，并且效果很好。

作为dayjs的核心维护者，我们愿意为这种替换提供任何帮助。

谢谢。

请考虑使用轻量的Dayjs来替换moment.js，在这里已经充分测试过替换的可行性https://github.com/iamkun/dayjs/issues/529 。

xxyuk picture xxyuk 于 2019-08-08
👍34 ❤12

Old Icon usage way will be* deprecated*:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Will use import single Icon instead in 4.0 :

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

关于新的图标引用我有一个想法，因为上面的新写法，每个图标相当于一个单独的组件， 比如引入 loading 图标，可能像这样：

import Loading from 'antd/icons/Loading';

<Loading />

但是平常可能自己会封装一个 真的的loading 组件，而且以前 <Icon /> 一眼就知道这是个图标，现在占用名字太多了而且想知道是图标还得往上找到 import 的地方。
比如：

<Title />
<Loading />
<Sun />

一眼看上去下面两个看不出来是 icon（当然对代码运行没有任何影响~）
如果改成下面这种写法：

 import {Icon} from 'antd';
 import {Loading, Sun} from '@antd/icons';  

<Icon spec={Loading}  {...otherProps}/>
<Icon spec={Sun} />

通过外面包一层的样式，跟以前看起来很相似，而且同样可以按需使用，无非多引入一个 Icon 组件。
而且如果满足一定的约定的话，用户自定义 Icon 可以通过 spec 属性传进去？就相当于 antd 预先帮忙定义了许多图标，但是用户自定义是一模一样的~~~(随便说说~)

ps: 还是说这种写法其实早就想到了或者根本没想因为这种写法有某方面的问题？。。😂
我只是想到了说一下。。。

ppbl picture ppbl 于 2019-08-14
👍4

@ppbl 按照你的想法写法类似如下：

import Icon from '@antd/icons'; 
imoort { LoadingOutline } from '@antd/icons-svg';

<Icon component={LoadingOutline}  {...otherProps}/>

新的 Icon 也是类似生成的，可见 https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx

是否我们可以通过在 Icon 的名字增加 Icon 前缀/后缀的方式来避免这种情况呢？

imoort { LoadingOutlineIcon } from '@antd/icons';

<LoadingOutlineIcon  {...otherProps}/>
vagusX picture vagusX 于 2019-08-14
👍1

请减少包装尺寸
https://github.com/ant-design/ant-design/issues/9419
导入Button会在项目中添加95kb-在2019年根本不可接受。

avalanche1 picture avalanche1 于 2019-08-14
😕1

@vagusX 可能我只是觉得名字有点长了？ 我总觉得名字简洁一点看起来就是小组件或者比较单一的组件，名字太长了应该是个很大的组件（当然这是错误的感觉~ 我知道）。。~

当然这个我如果仅仅是为了想看见<Icon /> 就知道是 icon 的话，完全也可以自己搞一个 <Icon />组件 ,然后用的时候 把 antd 的 icon 包裹一下，是差不多的效果~ 我只是感觉全都是 icon, 确是一堆散落的名字感觉有点奇怪~ 差别就是原来先知道是 icon, 后知道是什么类型的， 现在是先知道类型，后知道， 哦， 是个icon~

ppbl picture ppbl 于 2019-08-14

@ avalanche1您可以查看此pr的捆绑包分析结果https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838以及组件Button明显下降

vagusX picture vagusX 于 2019-08-14

很高兴知道。 但是，在您的屏幕截图中，没有实际尺寸的迹象，因此我既无法确认也无法反驳。

avalanche1 picture avalanche1 于 2019-08-15

我打算将Form迁移到新的API，但是我发现field-form的版本不稳定，因此我想知道将来将来这些接口是否会引起重大更改。

orzyyyy picture orzyyyy 于 2019-08-16

@orzyyyy ，
antd发布了4.0-alpha.x版本，供社交和内部志愿者进行测试。 如果没有来自Alpha版本的负面反馈，则此api将是发布时的最终版本。

zombieJ picture zombieJ 于 2019-08-16
👍3

@ avalanche1 @ant-design/icons v4-alpha版本支持摇树，因此捆绑包的大小取决于您在自己的项目中使用了多少图标，无论您使用的是内部导入图标的antd组件，还是使用@ant-design/icons ，因此我可能无法理解您对此的关注。

vagusX picture vagusX 于 2019-08-16

当我的第一篇文章是关于Button，Calendar和其他组件时，为什么我们要谈论图标？ https://github.com/ant-design/ant-design/issues/9419

avalanche1 picture avalanche1 于 2019-08-16

DatePicker值必须是矩，可以除去矩吗？ 如果我从更新，我必须转换为矩

jeessy2 picture jeessy2 于 2019-08-18
👍2

对于moment ，这是我的考虑。 由于兼容性要求，DatePicker默认仍默认使用moment ，但它提供了使用其他日期库创建的工厂函数：

import DatePicker, { createPicker } from 'antd/lib/date-picker';

import dayjs from 'dayjs';

const basicDemo = <DatePicker />

const MyDatePicker = createPicker(dayjs, {
  // Some proxy function, maybe can provided by default...
  format(dayObj, formatStr) {
    return ...;
  },
  parse(str, formatStr) {
    return ...;
  },
});

const dayDemo = <MyDatePicker />;

刚想到，欢迎讨论。

zombieJ picture zombieJ 于 2019-08-19
👍6

现在是时候摆脱moment.js了！

  1. 由于Moment.js具有复杂的OOP API，因此永远不会摇晃开销。

  2. Ant Design v4是主要版本，已经进行了重大更改。 现在是时候了！

  3. 我建议不要将其替换为另一个库。 Antd可能在内部使用dayjs或date-fns类的小东西，但它应接受本机Date对象或字符串作为其组件。

每次您呼叫moment() ，就会有一只小狗死..

：狗：

onury picture onury 于 2019-08-21
👍38 👀1 ❤1 👎1

@zombieJ 想了解Table组件的进展如何了，有没有像Form一样的预览版可以使用？快被合计搞到吐血了😂

Liu-Ya picture Liu-Ya 于 2019-08-21

Alpha版本是否已经包括新的Table？ 如果是这样，预览网站应该包含一个示例吗？

ArthurBrito picture ArthurBrito 于 2019-08-21

表在队列中，当前我正在处理虚拟列表。

zombieJ picture zombieJ 于 2019-08-21
👍9 ❤4

那么样式化组件支持呢？

khryshyn picture khryshyn 于 2019-08-24
👎3 👍1

表单initialValues不会设置moment 。 https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

hengkx picture hengkx 于 2019-08-24
👍1

希望 Form 可以提供非受控版本，以解决那种类似 Excel 的大表单性能问题

zoffyzhang picture zoffyzhang 于 2019-08-26

Alpha文档是否有可能移至常规Ant文档站点？

我的雇主禁止Netlify域，我认为其他人也可能。

hannaofsweden picture hannaofsweden 于 2019-09-04
👍1

有具体的计划来支持通​​过菜单和下拉菜单进行键盘操作吗？

wattlebird picture wattlebird 于 2019-09-09

Alpha文档是否有可能移至常规Ant文档站点？

我的雇主禁止Netlify域，我认为其他人也可能。

为什么？ 大声笑

lu-zen picture lu-zen 于 2019-09-10

It is hoped that the Table component will resemble Element's Table component. Each column will automatically set a width first. It is suggested that the header character of the table be changed to min-width instead of line-changing. It is hoped that the folding and scrolling functions can be used simultaneously. It is hoped that the tree-shaped table will resemble TreeSelect when multiple choices are made.

希望Table组件能像Element的Table组件，每列自动先设置一个宽度，表格头部字符不换行建议改成min-width,希望折叠功能和滚动功能能同时使用，希望树形表格在多选的时候，能像TreeSelect类似

z5829984520 picture z5829984520 于 2019-09-11
👍3

如果使用v4或v5，您是否有可能对定制做些什么？ MaterialUI更容易自定义，这使它成为我正在从事的项目的选择，即使我真的想使用AntD也是因为它更加完善。
拜托，请减少丢弃，以更好地进行自定义。

murbanowicz picture murbanowicz 于 2019-09-18
👍5 👎1

在让代理商测试我们的antd Web应用程序之后，他们发现了严重的可访问性漏洞，我们得到的评分可能是最差的。 在调查主要原因时，可以归结为以下rc组件：

  • rc-select（我们必须用Downshift代替，并在顶部应用antd样式）
  • rc-tabs（请参阅＃18798）
  • 也许到目前为止我们还没有使用过

antd对rc组件有多大的管治，团队能否及时为4.0版本修复此问题？ 可访问性将始终被优先考虑，但事实是，随着企业在法律上有义务向员工/客户提供可访问的应用程序，越来越难以忽略它。

您可以依靠屏幕阅读器进行大量测试，并对照最佳实践进行基准测试。

filipjnc picture filipjnc 于 2019-09-19
👍1

MaterialUI易于定制

@murbanowicz您能否详细说明？ 我很好奇你为什么这么认为。

abenhamdine picture abenhamdine 于 2019-09-19

@abenhamdine没问题！
在MUI中，有一个ThemeProvider ，您可以在其中包装应用程序，并仅通过在TypeScript中键入的JS对象配置整个主题，因此使用起来非常好。

在AntD中进行自定义时，您必须弄混LESS或SASS（带有某些插件），因此必须维护其他deps等，您必须遍历组件源来查找要针对特定​​组件等进行更改的变量。
另外，没有一种在运行时更改主题的好方法，而通过MUI这么简单，仅通过切换JS对象（可以从服务器等轻松获取）就可以轻松实现。

基本上，当您寻求对AntD和MUI进行自定义时，您会在MUI上找到简单的示例，因为没有什么可以直接谈论的，但是当您使用Google搜索AntD客户化时，会发现很多黑客解决方案等。

我喜欢AntD来完成功能和许多出色的组件，但是定制确实很糟糕，根据我的经验并与其他开发人员交谈，定制应该是路线图上的关键点之一

murbanowicz picture murbanowicz 于 2019-09-19
👍6

@abenhamdine没问题！
在MUI中，有一个ThemeProvider ，您可以在其中包装应用程序，并仅通过在TypeScript中键入的JS对象配置整个主题，因此使用起来非常好。

在AntD中进行自定义时，您必须弄混LESS或SASS（带有某些插件），因此必须维护其他deps等，您必须遍历组件源来查找要针对特定​​组件等进行更改的变量。
另外，没有一种在运行时更改主题的好方法，而通过MUI这么简单，仅通过切换JS对象（可以从服务器等轻松获取）就可以轻松实现。

基本上，当您寻求对AntD和MUI进行自定义时，您会在MUI上找到简单的示例，因为没有什么可以直接谈论的，但是当您使用Google搜索AntD客户化时，会发现很多黑客解决方案等。

我喜欢AntD来完成功能和许多出色的组件，但是定制确实很糟糕，根据我的经验并与其他开发人员交谈，定制应该是路线图上的关键点之一

清晰准确的解释，谢谢！

abenhamdine picture abenhamdine 于 2019-09-19
👍3

@abenhamdine没问题！
在MUI中，有一个ThemeProvider ，您可以在其中包装应用程序，并仅通过在TypeScript中键入的JS对象配置整个主题，因此使用起来非常好。

在AntD中进行自定义时，您必须弄混LESS或SASS（带有某些插件），因此必须维护其他deps等，您必须遍历组件源来查找要针对特定​​组件等进行更改的变量。
另外，没有一种在运行时更改主题的好方法，而通过MUI这么简单，仅通过切换JS对象（可以从服务器等轻松获取）就可以轻松实现。

基本上，当您寻求对AntD和MUI进行自定义时，您会在MUI上找到简单的示例，因为没有什么可以直接谈论的，但是当您使用Google搜索AntD客户化时，会发现很多黑客解决方案等。

我喜欢AntD来完成功能和许多出色的组件，但是定制确实很糟糕，根据我的经验并与其他开发人员交谈，定制应该是路线图上的关键点之一

我同意@murbanowicz的观点，即使用moment导致捆绑包很大），但是使用MUI已有很长时间了，我发现Antd更具可定制性。

我不是MUI的新版本，但是我上次检查时，有一部分组件无法自定义，因为MUI使用styled-components ，如果开发人员未添加classNames随处可见，您不能只选择组件的确切className并用自己的样式覆盖它。
对于直接使用库来说，主题化很酷，但是如果您想使样式适应您的设计系统，那么MUI会很混乱，有时甚至是不可能的；）

但是， antd确实需要做一些工作才能使自定义体验更容易;）

pybuche picture pybuche 于 2019-09-19
👍4

@filipjnc ，
rc-select发布了Alpha版本，增强了可访问性。 您可以帮助进行测试。 v4 prepare分支已使用它，您可以在顶部看到预览。
对于rc-tabs ，由于它不是最重要的，所以我也会对其进行增强，但稍后再进行。

zombieJ picture zombieJ 于 2019-09-20

@zombieJ好吧，我来看看rc-select alpha。

即使rc-tabs不是优先事项，您也可以看看我的请求请求，我在其中修复了可访问性测试结果中最关键的点吗？

filipjnc picture filipjnc 于 2019-09-20

我这边有个问题，按照目前icon的改法，如果存在antd的组件form和icon的
form同时引入的情况是不是只能给其中一个别名

zkwolf picture zkwolf 于 2019-09-25
👎1

@zkwolf 对的，我们正在给 icon 做重命名：https://github.com/ant-design/ant-design-icons/pull/118

cc @vagusX

afc163 picture afc163 于 2019-09-25
👎1

我非常希望解决常量表格重新渲染的问题

avalanche1 picture avalanche1 于 2019-09-30
👍1

请注意，在https://next.ant.design上，组件未在组件侧栏中按字母顺序排序
Schermata 2019-09-30 alle 18 01 03

avalanche1 picture avalanche1 于 2019-09-30
👍1

如您所知，在可访问性方面，蚂蚁设计做得并不好。 对于大多数人来说，这在表面上不太明显，但是当您深入潜水时，这是一个大问题。 在这里查看ant-design的得分情况如何： https ：

好消息是，由于我非常喜欢蚂蚁设计，并且我打算将其进一步用于企业项目，因此我的目标是将其放在第一位。

我让一家代理商为德国的客户测试我的企业应用程序之一（在这里，可访问性在大公司中是一个巨大的话题）。 最关键的事情是：

  1. 屏幕阅读器可访问基本但至关重要的组件，例如“选择”，“自动完成”和“选项卡”
  2. 许多地方的色彩对比
  3. 某些地方的键盘导航

我首先选择rc-tabs作为解决其所有可访问性问题的捷径-应该很快就会淘汰（https://github.com/react-component/tabs/pull/218）。 但是让我最担心的是rc-select ，尤其是其中的组合框（自动完成）部分。 组合框是屏幕阅读器可访问性中最棘手的方面之一，很容易出错。 要解决所有问题，它不仅需要对咏叹调属性进行一些调整，还需要进行大修。

为了在上线之前在应用程序中快速修复它，我已经使用基于https://github.com/downshift-js/downshift的我自己的组件替换了ant-design的Select和AutoComplete（ rc-select ） 。 我只是在顶部复制了ARIA最佳实践并应用了antd样式-看起来几乎完全一样，并且可以轻松访问。

因此，具有挑衅性的问题是：您是否会考虑不做双重工作，而不赞成使用rc-select来支持更流行且更完整的downshift库？ 您可以在团队中节省一些时间，并专注于完善其他核心组件，这些组件在开源市场上没有很好的选择。

filipjnc picture filipjnc 于 2019-10-04
👍13 ❤2 🎉1

这个想法对我来说真是太棒了

ArthurBrito picture ArthurBrito 于 2019-10-04
👍3

我希望在4.0版本中看到更多的颜色改进。 具体来说，文档提到了“数据可视化调色板（即将推出）”，这对于仪表板和其他数据密集型应用程序将非常有帮助。 温暖和凉爽的灰色也将有助于建立更具凝聚力的调色板。 此外，这是修复颜色对比度以提高可访问性的好机会（如@filipjnc所述）。 保持良好的工作👍

jlarmstrongiv picture jlarmstrongiv 于 2019-10-04

如您所知，在可访问性方面，蚂蚁设计做得并不好。 对于大多数人来说，这在表面上不太明显，但是当您深入潜水时，这是一个大问题。 在这里查看ant-design的得分情况如何： https ：

好消息是，由于我非常喜欢蚂蚁设计，并且我打算将其进一步用于企业项目，因此我的目标是将其放在第一位。

我让一家代理商为德国的客户测试我的企业应用程序之一（在这里，可访问性在大公司中是一个巨大的话题）。 最关键的事情是：

1. Screen reader accessibility for basic but crucial components like Select, Autocomplete and Tabs

2. Color contrasts in many places

3. Keyboard navigation in some places

我首先选择rc-tabs作为解决其所有可访问性问题的捷径-应该很快就会淘汰（ react-component / tabs＃218 ）。 但是让我最担心的是rc-select ，尤其是其中的组合框（自动完成）部分。 组合框是屏幕阅读器可访问性中最棘手的方面之一，很容易出错。 要解决所有问题，它不仅需要对咏叹调属性进行一些调整，还需要进行大修。

为了在上线之前快速在我的应用程序中对其进行修复，我已经使用基于https://github.com/downshift-js/downshift的自己的组件替换了ant-design的Select和AutoComplete（ rc-select ） 。 我只是在顶部复制了ARIA最佳实践并应用了antd样式-看起来几乎完全一样，并且可以轻松访问。

因此，具有挑衅性的问题是：您是否会考虑不做双重工作，而不赞成使用rc-select来支持更流行且更完整的downshift库？ 您可以在团队中节省一些时间，并专注于完善其他核心组件，这些组件在开源市场上没有很好的选择。

我对降档不会那么热心，请参阅https://github.com/downshift-js/downshift/issues/730
可访问性对于某些用户来说很重要，但是性能对于更多的用户来说很重要。

abenhamdine picture abenhamdine 于 2019-10-05
👀1

表在队列中，当前我正在处理虚拟列表。

嗨，@zombieJ
摘要页脚有什么进展吗？

alexchen1875 picture alexchen1875 于 2019-10-08

@ alexchen1875 ，
等待新的生命周期代码更新。 表是完成后的下一个：）

zombieJ picture zombieJ 于 2019-10-08
👍2 ❤1

4.0 能把一些 props 参数改成驼峰式吗？比如 Input.TextArea 里面的 autosize 改成 autoSize？
原生 HTML 的标签在 React 里的 props 都是驼峰式的，比如 <input autoComplete />，这个 autosize 看着总是不和谐。。。

jinliming2 picture jinliming2 于 2019-10-09
👍7 👎1

3.x 里就能改，兼容并废弃原来的用法即可。@jinliming2 有没有兴趣来个 PR？

afc163 picture afc163 于 2019-10-10
👎1
  • 4.0 为啥把Tree的 props.children 标记为过时的api, 转而推荐treeData这种纯数据的方式了， 感觉 props.children 这个很好用，可玩性很高
  • react 最新的 api 中已经将 componentWillReceiveProps 标记为过时， 目前试用时发现 table 组件和Animate组件还存在
itlangzi picture itlangzi 于 2019-10-14
👎1

+1用于辅助功能。 请！

timkindberg picture timkindberg 于 2019-10-18

说起来，关于clear图标大小的问题，好像其他组件的图标是12px,datepicker是14px，这里是有其他组件clear和后缀图标大小区别的考量还是因为datepicker是图标切换就14px了？有没有统一一下大小的打算

zkwolf picture zkwolf 于 2019-10-19
👎1

@zombieJ 计划添加Table 多列排序的功能吗

Nokecy picture Nokecy 于 2019-10-23
👎1

请用英文写

akaguny picture akaguny 于 2019-10-23
👍15 ❤5 👀3 😄2 😕1 👎1

moment size 太大的问题会被修复吗？

swaitw picture swaitw 于 2019-10-24
👎1

moment size 太大的问题会被修复吗？

试试先用 dayjs 吧

fatelei picture fatelei 于 2019-10-24
👍6 👎1

可不可以 in English ，考虑考虑老外的感受，我都是 google translate，语法标不标准不重要，单词对他们就看的懂

wanliyunyan picture wanliyunyan 于 2019-10-24
👎3

@ afc163
您是否认为外国人正在关注此回购协议？ 不幸的是，Google Translate并不是了解您所说内容的好工具。 我意识到Ant-Design的大多数开发人员和用户都是中文，但您是否也认为非中文？
因此，我敦促您使用国际语言来尊重我们所有人。

lvlohammadi picture lvlohammadi 于 2019-10-24
👍19 ❤7 👎6

你好
我想尝试使用带有create-react-app和Typescript的Ant Design 4.0。
我按照https://next.ant.design/docs/react/introduce上的说明进行操作，但无法获得有效的应用程序。
遵循create-react-app的基本说明（ import Button from 'antd/es/button'; ）导致错误：

找不到模块antd / es / button

添加react-app-rewired，customize-cra，babel-plugin-import并将导入更改为import {Button} from 'antd'我得到错误消息：

找不到模块“ antd”的声明文件

请问我如何使antd4与crea-react-app和打字稿一起使用的建议？

gynekolog picture gynekolog 于 2019-10-24

@gynekolog ，
请检查node_modules是否正确安装。

参考https://codesandbox.io/s/cool-paper-4y1u7

zombieJ picture zombieJ 于 2019-10-24

@lvlohammadi不幸的是，像我这样的一些中国人的英语水平还不够好，但是我会尽力使用国际语言来参与社区交流。

yoyo837 picture yoyo837 于 2019-10-25
❤12

@gynekolog ，
请检查node_modules是否正确安装。

参考https://codesandbox.io/s/cool-paper-4y1u7

你是对的。 我跑

yarn add "https://github.com/ant-design/ant-design.git#4.0-prepare"

代替

yarn add "[email protected]"

耻辱...
谢谢。

gynekolog picture gynekolog 于 2019-10-25

dropdownMatchSelectWidth on Select component break on alpha version, 在之前的版本是生效的

GuichiZhao picture GuichiZhao 于 2019-10-25

如果要使用antd启动新项目，您会选择版本3还是版本4？ 版本4的生产准备情况如何？ 您是否还打算发布第四季度？

thj-dk picture thj-dk 于 2019-11-01
👍1

如果要使用antd启动新项目，您会选择版本3还是版本4？ 版本4的生产准备情况如何？ 您是否还打算发布第四季度？

Antd 4尚未准备就绪。 您应该从antd 3开始，过渡应该很容易（特别是如果按预期提供了codemods）。

abenhamdine picture abenhamdine 于 2019-11-01

我希望看到逻辑和显示之间完全分开，也就是说，除了操纵类名之外，js对视图没有其他作用。 视觉外观应全部由CSS（LESS）处理。 另外，可以使用Web Components代替React Components，以便非React开发人员可以更轻松地使用它。

yeegr picture yeegr 于 2019-11-04
👎2

我希望看到逻辑和显示之间完全分开，也就是说，除了操纵类名之外，js对视图没有其他作用。 视觉外观应全部由CSS（LESS）处理。 另外，可以使用Web Components代替React Components，以便非React开发人员可以更轻松地使用它。

我认为这种净化一切的想法毫无意义。 最好把重点放在更重要的事情上。

faradaytrs picture faradaytrs 于 2019-11-05
👍7

是否有计划在AutoComplete中进行多项选择，例如https://react-select.com？

nite picture nite 于 2019-11-05
👍3 👀1

我希望看到逻辑和显示之间完全分开，也就是说，除了操纵类名之外，js对视图没有其他作用。 视觉外观应全部由CSS（LESS）处理。 另外，可以使用Web Components代替React Components，以便非React开发人员可以更轻松地使用它。

我认为这种净化一切的想法毫无意义。 最好把重点放在更重要的事情上。

我认为没有比分离更紧迫的事情了。 在一个团队中，CSS通常由设计人员处理，而JS通常由编码人员处理。 允许两者都操纵样式将导致混乱，并不必要地浪费了开发时间。

以Menu为例，默认宽度和高度是由JS设置的，问题是，当有人想要更改外包装纸的宽度或高度时，菜单会伸出或周围有缝隙。 这将需要设计人员和编码人员进行修复，这意味着停机。

同样，作为组件，代码也不过分复杂，分离不应该花太多力气，但是结果将使用户和ant.design团队本身的工作更加轻松。

yeegr picture yeegr 于 2019-11-07

另一个小问题，Icon需要默认为16px，而不是14px，这是全局默认字体大小。 这意味着Icon应该使用与文本分开的变量，例如@ default-icon-size，@ icon-size-lg等。 这并不是真正的错误，而是功能丢失。

yeegr picture yeegr 于 2019-11-07
👀1 🚀1

@ afc163
您是否认为外国人正在关注此回购协议？ 不幸的是，Google Translate并不是了解您所说内容的好工具。 我意识到Ant-Design的大多数开发人员和用户都是中文，但您是否也认为非中文？
因此，我敦促您使用国际语言来尊重我们所有人。

人们有权使用自己的语言，并且应该对此感到自在。我尊重通过提供翻译使尽可能多的受众参与进来的努力，因此，没有人会因为使用自己最熟悉的语言而被授课。维护者理解沟通的能力。 认为该项目的主要贡献者不应该使用其母语进行交流的想法超出了其他某种语言的想法，这是荒谬的。 可以要求翻译，但要尊重。 因为它们是中文，所以对响应进行否决既适得其反，又幼稚。

viztor picture viztor 于 2019-11-09
👍21 👎1

Dudes， And Design 4.0版是否具有JSS而不是_Less_来生成CSS？

amerllica picture amerllica 于 2019-11-13

Dudes， And Design 4.0版是否具有JSS而不是_Less_来生成CSS？

AFAIK，不。 但是您可以尝试使用样式化组件（例如）。

abenhamdine picture abenhamdine 于 2019-11-13
👍2

谢谢，亲爱的@ tomgao365 ，我创建了您引用的问题。 我想为彻底删除Less而改用JSS做出很好的PR。在版本3上工作不是一个好主意，因为许多项目是使用版本3进行的，所以我决定在版本4上实现JSS。

另外，亲爱的@abenhamdine我还有一个问题，您对使用JSS而不是使用Less的想法是什么？

amerllica picture amerllica 于 2019-11-13

另外，亲爱的@abenhamdine我还有一个问题，您对使用JSS而不是使用Less的想法是什么？

根据我的主要好处：

  • 动态样式（痛苦少）
  • 自动补全（不确定是哪一种，取决于您使用的工具/ JSS库）
  • 样式的继承

值得尝试。
但这不是灵丹妙药。

abenhamdine picture abenhamdine 于 2019-11-13

亲爱的@abenhamdine ，我留下一个有Discussion徽章的问题。 ＃19181。

我想开始实施JSS并省略Less，但是新版本即将发布，我担心我的所有努力都将浪费掉。

amerllica picture amerllica 于 2019-11-16

很高兴在这里看到有关将Moment.js替换为Day.js或本机Date对象的替代方法的讨论，网址为https://github.com/ant-design/ant-design/issues/19738

xxyuk picture xxyuk 于 2019-11-16
😄2

使用版本4中的create-react-app可以更简单地更改颜色主题吗？

flashtheman picture flashtheman 于 2019-11-16

我同意@flashtheman的观点，无需使用较少的变量就可以覆盖主题，这很不错-例如，情感中的ThemeProvider之类的东西： https :

hsz picture hsz 于 2019-11-16
👍2

在jQuery时代，主题设置非常流行，用户喜欢使用它。
我已经等待了两年多的简单方法在生产环境中修改主题。

tomgao365 picture tomgao365 于 2019-11-17
👍4 👎3

在新版的icon组件中，如果icon是动态确定的，那在新版中应该如何处理，暂时只能想到用require+变量字符串，原来只需要用变量填充type属性即可，有什么其他处理方法吗？
google translate：In the new version of the icon component, if the icon is dynamically determined, then how to deal with it in the new version, for the time being can only think of the require + variable string, the original only need to fill the type attribute with variables, what other processing methods?

thding picture thding 于 2019-11-21

在新版的icon组件中，如果icon是动态确定的，那在新版中应该如何处理，暂时只能想到用require+变量字符串，原来只需要用变量填充type属性即可，有什么其他处理方法吗？
google translate：In the new version of the icon component, if the icon is dynamically determined, then how to deal with it in the new version, for the time being can only think of the require + variable string, the original only need to fill the type attribute with variables, what other processing methods?

试试用 React 文档里推荐的 https://github.com/smooth-code/loadable-components

jinliming2 picture jinliming2 于 2019-11-21

什么时候发布正式版呀

guangming21 picture guangming21 于 2019-11-22

4.0 Table有支持Pivot功能吗？

liuhaidi1209 picture liuhaidi1209 于 2019-11-28

@ afc163-好像全球性污染是人们想要新版本发布的第一号问题。 您是否有人为此工作？ 我很乐意做这项工作并提供帮助。 应该不难，只是需要一些努力。 我在Ant Design中也遇到了这个问题。 我想解决它。

meebix picture meebix 于 2019-11-29
👍9

在减小部件尺寸方面有什么工作要做吗？
一次：为什么如果我想要一个简单的Button -我必须导入整个antd.css文件？

avalanche1 picture avalanche1 于 2019-11-29

在减小部件尺寸方面有什么工作要做吗？
一次：为什么如果我想要一个简单的Button -我必须导入整个antd.css文件？

@ avalanche1请参阅https://ant.design/docs/react/introduce#用法

使用模块化antd

jinliming2 picture jinliming2 于 2019-11-30

我来说一个上传组件对于目前对于支持自定义列表渲染支持不够.
另外上传进度只有百分比,而且也不方便扩展以支持实时速度的显示.

codetalks-new picture codetalks-new 于 2019-12-03

@ banxi1988

https://github.com/ant-design/ant-design/blob/c824569ea0810e2cf11bc2953b333eb0e404fd1c/components/upload/interface.tsx#L47 -L52

如果要显示速度，onChange返回了已上传文件的百分比。 您可以计算上传速度。

muzea picture muzea 于 2019-12-03

@ Z3SA https://caniuse.com/#search = CSS％20变量。 这需要停止所有IE支持，停止IE11支持太激进，尽管我也支持这样做。

您仍然可以通过后备支持来做到这一点。 例如： color: var(--red, @red);一个简单的全局查找/替换所有当前变量可以解决这个问题。

davidpanzarella picture davidpanzarella 于 2019-12-05

是否正在考虑针对v4放弃使用LESS来支持SASS或其他更好的样式解决方案？

murbanowicz picture murbanowicz 于 2019-12-08

@murbanowicz ，您好，谢谢您的评论，我留下了一个关于使用JSS而不是Less ，在这里，我表示愿意进行此迁移，但没有人显示任何操作。

amerllica picture amerllica 于 2019-12-08

@zombieJ您好，谢谢您在Ant Design方面所做的出色工作？ 是否有计划提供一种开箱即用的方式来切换应用程序中的深色主题？

veeral-patel picture veeral-patel 于 2019-12-08

关于 form 组件的一个建议：
非常高兴看到在新的4.0版本中，form 组件将会对开发人员更友好。我看到新的示例，Form 组件下面的Form.Item 组件将不再需要使用getFieldDecorator 。这是一个非常好的改进，但是我有一个一个更激进的建议：移除 Form.Item 组件，进一步优化代码的编写体验，让编码更清爽。而 Form.Item 组件的原有功能直接下放到具体的输入组件（如：Input、DataPick等）中。
这样做是考虑到大部分情况下开发的表单，使用的都是 antd 内置的输入组件，具备条件通过增强输入组件的能力来实现 Form.Item 组件的功能；而对于少部分特殊情况（如用户自定义组件、某个输入组件不希望通过 Form 进行绑定），可以专门提供特殊的包装组件来进行指示。
对 antd 的研究不深，仅从普通的使用者角度提出上诉建议，如有不妥，请海涵。

shengliangli picture shengliangli 于 2019-12-10
👎8

关于 form 组件的一个建议：
非常高兴看到在新的4.0版本中，form 组件将会对开发人员更友好。我看到新的示例，Form 组件下面的Form.Item 组件将不再需要使用getFieldDecorator 。这是一个非常好的改进，但是我有一个一个更激进的建议：移除 Form.Item 组件，进一步优化代码的编写体验，让编码更清爽。而 Form.Item 组件的原有功能直接下放到具体的输入组件（如：Input、DataPick等）中。
这样做是考虑到大部分情况下开发的表单，使用的都是 antd 内置的输入组件，具备条件通过增强输入组件的能力来实现 Form.Item 组件的功能；而对于少部分特殊情况（如用户自定义组件、某个输入组件不希望通过 Form 进行绑定），可以专门提供特殊的包装组件来进行指示。
对 antd 的研究不深，仅从普通的使用者角度提出上诉建议，如有不妥，请海涵。

@shengliangli 感觉耦合性太强了吧。。。

jinliming2 picture jinliming2 于 2019-12-10
👎1

关于 form 组件的一个建议：
非常高兴看到在新的4.0版本中，form 组件将会对开发人员更友好。我看到新的示例，Form 组件下面的Form.Item 组件将不再需要使用getFieldDecorator 。这是一个非常好的改进，但是我有一个一个更激进的建议：移除 Form.Item 组件，进一步优化代码的编写体验，让编码更清爽。而 Form.Item 组件的原有功能直接下放到具体的输入组件（如：Input、DataPick等）中。
这样做是考虑到大部分情况下开发的表单，使用的都是 antd 内置的输入组件，具备条件通过增强输入组件的能力来实现 Form.Item 组件的功能；而对于少部分特殊情况（如用户自定义组件、某个输入组件不希望通过 Form 进行绑定），可以专门提供特殊的包装组件来进行指示。
对 antd 的研究不深，仅从普通的使用者角度提出上诉建议，如有不妥，请海涵。

@shengliangli 感觉耦合性太强了吧。。。

我认为 Form.Item 是 antd 为了实现 Form 组件数据绑定功能而“额外” 增加的一个组件，本身这样实现固然有原因，但是终归是增加了一个额外的东西。就像大家诟病 redux 的模式化代码太多的问题一样，开发人员可能也并不喜欢这样的写法。如果能够把 form.item 实现的数据绑定的功能理解为 Input 这样的输入组件应该具有的特质，从而增强 输入组件的能力，是不是感觉更自然一些。

耦合性的问题我也想了一下，问题的根源可能还在于我们如何定义输入组件的能力和行为特征。

shengliangli picture shengliangli 于 2019-12-11

关于 form 组件的一个建议：
非常高兴看到在新的4.0版本中，form 组件将会对开发人员更友好。我看到新的示例，Form 组件下面的Form.Item 组件将不再需要使用getFieldDecorator 。这是一个非常好的改进，但是我有一个一个更激进的建议：移除 Form.Item 组件，进一步优化代码的编写体验，让编码更清爽。而 Form.Item 组件的原有功能直接下放到具体的输入组件（如：Input、DataPick等）中。
这样做是考虑到大部分情况下开发的表单，使用的都是 antd 内置的输入组件，具备条件通过增强输入组件的能力来实现 Form.Item 组件的功能；而对于少部分特殊情况（如用户自定义组件、某个输入组件不希望通过 Form 进行绑定），可以专门提供特殊的包装组件来进行指示。
对 antd 的研究不深，仅从普通的使用者角度提出上诉建议，如有不妥，请海涵。

@shengliangli 感觉耦合性太强了吧。。。

我认为 Form.Item 是 antd 为了实现 Form 组件数据绑定功能而“额外” 增加的一个组件，本身这样实现固然有原因，但是终归是增加了一个额外的东西。就像大家诟病 redux 的模式化代码太多的问题一样，开发人员可能也并不喜欢这样的写法。如果能够把 form.item 实现的数据绑定的功能理解为 Input 这样的输入组件应该具有的特质，从而增强 输入组件的能力，是不是感觉更自然一些。

耦合性的问题我也想了一下，问题的根源可能还在于我们如何定义输入组件的能力和行为特征。

不是特别同意，我认为 Form.Item 主要还是一个组件的外部包装，比如 label 和 column 之类的属性，确实不适合 inline 到组件里。

dancerphil picture dancerphil 于 2019-12-11

嗨@zombieJ
有兴趣知道第4版何时发布？
期待听到回音

madurak picture madurak 于 2019-12-11
👀2

我也如何为设计做出贡献。
希望听到别人的声音

ekeminimarkk001 picture ekeminimarkk001 于 2019-12-12

beta.0版本了，意味着可以开始用了吗？

fwh1990 picture fwh1990 于 2019-12-12

关于 form 组件的一个建议：
非常高兴看到在新的4.0版本中，form 组件将会对开发人员更友好。我看到新的示例，Form 组件下面的Form.Item 组件将不再需要使用getFieldDecorator 。这是一个非常好的改进，但是我有一个一个更激进的建议：移除 Form.Item 组件，进一步优化代码的编写体验，让编码更清爽。而 Form.Item 组件的原有功能直接下放到具体的输入组件（如：Input、DataPick等）中。
这样做是考虑到大部分情况下开发的表单，使用的都是 antd 内置的输入组件，具备条件通过增强输入组件的能力来实现 Form.Item 组件的功能；而对于少部分特殊情况（如用户自定义组件、某个输入组件不希望通过 Form 进行绑定），可以专门提供特殊的包装组件来进行指示。
对 antd 的研究不深，仅从普通的使用者角度提出上诉建议，如有不妥，请海涵。

首先你要知道这和内不内置没有关系，用所谓的内置组件可以说是一种偶然
getFieldDecorator是连接form组件和input组件的桥梁 form.item传入value和onChange两个属性，然后被wrap的组件通过value和onChange这两个接口方法和外部交互。换句话说，任何组件只要implement了value和onChange就都可以成为getFieldDecorator的参数。这是典型的program to interface的思想

PS：我没有看过源码，以上全部是我看完文档猜的

GuichiZhao picture GuichiZhao 于 2019-12-12
👍1

Form.Item可以与基础Component交互的原因与某些人所期望的“内置”机制无关。 这只是编程世界中的一个常见技巧，称为program to interface

基本上， Form组件和基础组件在value和onChange类的东西上达成共识。 它们充当两个世界之间的接口以便进行通信。 这是一个很好的去耦设计

@dancerphil也许您可以在官方文档中更明确地阐明这个想法

GuichiZhao picture GuichiZhao 于 2019-12-12

Hi all, v4 beta is released. API is stable now which means no breaking change on API unless critical issue happened. During beta version, designers will help on continue UI visual design adjustment and we will focus on bug fix. Please feel free to try on and help us for fire bug or feed back.

Thanks for everyone participate in coding & trying. Your help means a lot : )

大家好，beta 版本已经发布。API 如果没有重大设计问题，不会再进行变动。在 beta 版本中，设计师会协助对 v4 的 UI 样式进行调整，而我们会聚焦在 bug 修复。欢迎使用来帮助我们找 bug 或者有任何其他反馈。

感谢大家参与开发和试用工作。你们的帮助意义非凡 : )

ref: http://new-issue.ant.design/

zombieJ picture zombieJ 于 2019-12-12
🎉9 ❤5 🚀3

我也如何为设计做出贡献。
希望听到别人的声音

@ ekeminimarkk001可以参考： https : //ant.design/docs/react/contributing

jinliming2 picture jinliming2 于 2019-12-12

@zombieJ问题中列出的所有更改是否已在Beta版中实现？

zachguo picture zachguo 于 2019-12-12

关于 form 组件的一个建议：
非常高兴看到在新的4.0版本中，form 组件将会对开发人员更友好。我看到新的示例，Form 组件下面的Form.Item 组件将不再需要使用getFieldDecorator 。这是一个非常好的改进，但是我有一个一个更激进的建议：移除 Form.Item 组件，进一步优化代码的编写体验，让编码更清爽。而 Form.Item 组件的原有功能直接下放到具体的输入组件（如：Input、DataPick等）中。
这样做是考虑到大部分情况下开发的表单，使用的都是 antd 内置的输入组件，具备条件通过增强输入组件的能力来实现 Form.Item 组件的功能；而对于少部分特殊情况（如用户自定义组件、某个输入组件不希望通过 Form 进行绑定），可以专门提供特殊的包装组件来进行指示。
对 antd 的研究不深，仅从普通的使用者角度提出上诉建议，如有不妥，请海涵。

首先你要知道这和内不内置没有关系，用所谓的内置组件可以说是一种偶然
getFieldDecorator是连接form组件和input组件的桥梁 form.item传入value和onChange两个属性，然后被wrap的组件通过value和onChange这两个接口方法和外部交互。换句话说，任何组件只要implement了value和onChange就都可以成为getFieldDecorator的参数。这是典型的program to interface的思想

PS：我没有看过源码，以上全部是我看完文档猜的

看了各位的回复，不得不说我对 antd 的 form 组件的建议不是太成熟，但是另一方面，提出这个建议也完全是从一个普通用户的角度出发在思考问题。对于一个使用强度如此之高的组件来说，如何能够更便利开发使用，写更少的代码，使用更清晰和自然的表达方式，是我对 antd 的殷切期望。

从使用者的角度，antd 已经非常优秀了，绝大部分的组件都能够做到拿来就用，用完就忘，下次想用，还能拿来就用。之所以能够达到这种效果，是同组件良好的 api 设计和封装分不开的，但是还有部分组件（比如 from、table）的使用场景，还有更好的提升的空间。

antd 只是工程中的一个工具组件，最好是不暴露自己的实现机制，或者说把实现机制巧妙地隐藏和同化在对外的 api 中。用户只是想用这个组件，想用最方便的形式，最自然的形式去使用，而不想成为某个工具组件的专家。

回到 form 组件，在现今 3.x 的 api 下，我其实更多地愿意使用阿里系的 uform，相比于 antd 的 form， uform 需要写的代码更少，生产效率更高。当然，uform 感觉更像是一个声明式的写法， 这点和 antd 的 form 差别很大，可能没有太多借鉴的价值。

作为 antd 的伸手党来说，提这么多要求确实有点不好意思，但是正因为热爱，所以才希望它更好，希望项目组理解，也希望能够在合适的版本下，进一步优化组件的开发使用体验。

shengliangli picture shengliangli 于 2019-12-12
👍3 👎1

很奇怪。我完全没有使用Icon，但是打包时却将icons-svg全部打包进来了。
webpack-bundle-analyzer.png
版本号：4.0.0-beta.0。使用了babel-plugin-import和tree-shaking，但是也没有什么用。

Xezzon picture Xezzon 于 2019-12-14
👀2 👍1

很奇怪。我完全没有使用Icon，但是打包时却将icons-svg全部打包进来了。
webpack-bundle-analyzer.png
版本号：4.0.0-beta.0。使用了babel-plugin-import和tree-shaking，但是也没有什么用。

Use this config

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },
RavilM picture RavilM 于 2019-12-15

很奇怪。我完全没有使用Icon，但是打包时却将icons-svg全部打包进来了。
webpack-bundle-analyzer.png
版本号：4.0.0-beta.0。使用了babel-plugin-import和tree-shaking，但是也没有什么用。

Use this config

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

感谢您的回复，可是我按照您的配置并没有起作用。

Xezzon picture Xezzon 于 2019-12-16

版本： 4.0.0-beta.0
问题：Modal组件visible切换的时候页面会滚
复现地址：

xiaoxintang picture xiaoxintang 于 2019-12-16

@xiaoxintang它固定在master分支中，等待合并。

shaodahong picture shaodahong 于 2019-12-16

@afc163 我要怎么安装 antd4.0 beta

XianZhengquan picture XianZhengquan 于 2019-12-18
👎2

https://next.ant.design/ 挂了

githubmann picture githubmann 于 2019-12-18
👀7

@afc163 我要怎么安装 antd4.0 beta

npm install antd@next
OR
yarn add antd@next

fwh1990 picture fwh1990 于 2019-12-18
👍1

似乎预览站点已损坏。 我仅收到“找不到页面”错误。

shaoran picture shaoran 于 2019-12-18

关于 form 组件的一个建议：
非常高兴看到在新的4.0版本中，form 组件将会对开发人员更友好。我看到新的示例，Form 组件下面的Form.Item 组件将不再需要使用getFieldDecorator 。这是一个非常好的改进，但是我有一个一个更激进的建议：移除 Form.Item 组件，进一步优化代码的编写体验，让编码更清爽。而 Form.Item 组件的原有功能直接下放到具体的输入组件（如：Input、DataPick等）中。
这样做是考虑到大部分情况下开发的表单，使用的都是 antd 内置的输入组件，具备条件通过增强输入组件的能力来实现 Form.Item 组件的功能；而对于少部分特殊情况（如用户自定义组件、某个输入组件不希望通过 Form 进行绑定），可以专门提供特殊的包装组件来进行指示。
对 antd 的研究不深，仅从普通的使用者角度提出上诉建议，如有不妥，请海涵。

可以试试这个：https://github.com/aweiu/ant-modifier

aweiu picture aweiu 于 2019-12-21

对于全局样式污染，有什么优化吗？

k644606347 picture k644606347 于 2019-12-26

对于全局样式污染，有什么优化吗？

antd似乎都有前缀吧，算不上污染。自己的项目css代码可以尝试使用css-modules解决全局污染的问题

fwh1990 picture fwh1990 于 2019-12-27

对于全局样式污染，有什么优化吗？

antd似乎都有前缀吧，算不上污染。自己的项目css代码可以尝试使用css-modules解决全局污染的问题

嗯这个前缀我知道，我是指全局css reset的那部分的污染，对在遗留项目中引入antd，css reset造成的污染问题

k644606347 picture k644606347 于 2019-12-28

对于全局样式污染，有什么优化吗？

antd似乎都有前缀吧，算不上污染。自己的项目css代码可以尝试使用css-modules解决全局污染的问题

具体可以参看官网链接中issue的讨论：https://ant.design/docs/react/faq-cn#antd-%E8%A6%86%E7%9B%96%E4%BA%86%E6%88%91%E7%9A%84%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%EF%BC%81

k644606347 picture k644606347 于 2019-12-28

求问 有Antd Pro 4.0 layout迁移Antd4.0的计划吗？
自己迁移项目的时候遇到 pro-layout 中 SiderMenu.js Icon.createFromIconfontCN错误
由于pro-layout里面依赖还是v3版本，本人小白不知道怎么改依赖，有懂的大神教一下

wushizhan picture wushizhan 于 2020-01-04

求问 有Antd Pro 4.0 layout迁移Antd4.0的计划吗？
自己迁移项目的时候遇到 pro-layout 中 SiderMenu.js Icon.createFromIconfontCN错误
由于pro-layout里面依赖还是v3版本，本人小白不知道怎么改依赖，有懂的大神教一下

由于icon在4.0里被分离出来了，需要修改import，你可以取next.ant.design看一下现在icon的api文档

zkwolf picture zkwolf 于 2020-01-06

感谢您对v4版本的所有贡献。 自4.0.0-rc.0版本发布以来关闭：Ref＃20661

zombieJ picture zombieJ 于 2020-01-09
👍2

StrictMode是目标吗？ 旧版上下文需要迁移https://github.com/ant-design/ant-design/issues/9870

ntucker picture ntucker 于 2020-01-10
👍2

https://github.com/ant-design/ant-motion/issues/272

prateekrastogi picture prateekrastogi 于 2020-01-25

我们可以将antd3和antd4都保留在存储库中吗？ 由于存储库太大，无法在任何地方进行更改，它将几乎重写整个代码库。
另外，如果可以，我们是否可以仅将antd3 CSS保留在全局文件夹中，并将antd4 CSS保留在某些文件夹中？

Ekta398 picture Ekta398 于 2020-09-11
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

longzb picture longzb  ·  3评论
mineralres picture mineralres  ·  3评论
drcmda picture drcmda  ·  3评论
alanwei0 picture alanwei0  ·  3评论
plandem picture plandem  ·  3评论