Ant Disign 4.0 升级实践扑街指南 (一)

时间 2020-03-04

标签 ant disign 4.0 升级实践指南栏目自动化构建繁體版

原文原文链接

背景

咱们都知道， AntD 最近喜提了4.0, 更新了许多新特性，看的我是心花盛开，喜不自胜。更贴心的是还提供了升级工具，看了一些文章介绍说能三分钟升级。因而周六的时候，懒觉我也不睡了，跑到公司开始了升级之旅。前端

注：此篇文章仅是我我的升级的时候遇到的一些问题，不具表明性，仅供参考。git

正文

首先是从这篇文章开始的：github

不少公众号也转发了这篇文章，写的很吸引人，我也想体验一下。npm

扑街第一步: antd4-codemod

看官方介绍：
segmentfault

我滴龟龟，也太好了吧！！一键转换美滋滋～antd

立刻安排！app

因而我敲下了第一行命令：工具

sudo npm i -g @ant-design/codemod-v4

全局安装了这个代码转换工具，很顺利。学习

扑街第一步：antd4-codemod

运行 antd4-codemod src

控制台:ui

出师未捷先报错。。

问题不大，咱们老实人不怕这个。

缺乏core-js, 那就装一个。

安装以后，仍是一样的报错。。。

一番搜索以后，在一个不起眼的文章里找到了答案：

全局安装，果真不报错core-js找不到了，问题解决。

(中间也爆了其余的错，花了很多时间，不过都一一解决了。)

直到又爆了新的错误：

搜索到一些答案：

按照文章中的提示，逐个修改，等待安装。

运行一下，仍是不行。。。

表情逐渐凝固。

这时候已经六七点了，看看外面，天都黑了。

这第一步还没迈出去，开始暴躁。

我是谁，我在哪，我为何要用这个 antd4-codemod...

冷静一下，打了局农药单排，输了。

而后开始手动一个个改文件。

扑街第二步: Form initialValues

想着今天必定，至少，得改完一个页面看看。

就挑了个简单的，一个Form表单页。

Form v3 & v4

去除 Form.create

v4 的 Form 再也不须要经过 Form.create() 建立上下文。Form 组件如今自带数据域，于是 getFieldDecorator 也再也不须要，直接写入 Form.Item 便可：

// antd v3
const Demo = ({ form: { getFieldDecorator } }) => (
  <Form>
    <Form.Item>
      {getFieldDecorator('username', {
        rules: [{ required: true }],
      })(<Input />)}
    </Form.Item>
  </Form>
);

const WrappedDemo = Form.create()(Demo);

改为：

// antd v4
const Demo = () => (
  <Form>
    <Form.Item name="username" rules={[{ required: true }]}>
      <Input />
    </Form.Item>
  </Form>
);

因为移除了 Form.create()，本来的 onFieldsChange 等方法移入 Form 中，经过 fields 对 Form 进行控制。

表单控制调整

Form 自带表单控制实体，如须要调用 form 方法，能够经过 Form.useForm() 建立 Form 实体进行操做：

// antd v3
const Demo = ({ form: { setFieldsValue } }) => {
  React.useEffect(() => {
    setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

  return (
    <Form>
      <Form.Item>
        {getFieldDecorator('username', {
          rules: [{ required: true }],
        })(<Input />)}
      </Form.Item>
    </Form>
  );
};

const WrappedDemo = Form.create()(Demo);

改为：

// antd v4
const Demo = () => {
  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

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

有个很简单列表页里包含一个Form，点击按钮，查看数据。

codeOpen连接：
https://codepen.io/scaukk/pen...

提了个issue:
https://github.com/ant-design...

这个问题，一个热心网友说：

加一个effect 每次显示modal的时候重置, 这个resetFields重置的每次都是initialValue的值你每次肯定的时候重置的值其实都是上一次的, 因此不会变

偏右的回复：

resetFields 是重置回 initialValues 的值，而且 initialValues 只用于第一次初始化，不响应后续的变化，你须要转换一下思路： https://codepen.io/afc163-147...

在官网中，也找到了这样的描述：

在 v3 版本中，修改未操做的字段 initialValue 会同步更新字段值，这是一个 BUG。可是因为被长期做为一个 feature 使用，于是咱们一直没有修复。在 v4 中，该 BUG 已被修复。initialValue 只有在初始化以及重置表单时生效。

因此， initialValue 只能做为组件初次挂载的时候生效。

偏右的作法和文档推荐的一致：

render: (text, record) => (
  <span onClick={() => {
    setVisible(true)
    setRecord(record)
    form.setFieldsValue({
      name: record.name,
    });
  }}>
    <a>查看</a>
  </span>
),