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>
),