管理后台antd3升級antd4

官方升級文檔https://ant.design/docs/react/migration-v4-cn

一、升級准備

升級react到16.14.0：yarn add react@16.14.0
升級react-dom到16.14.0：yarn add react-dom@16.14.0
新版antd4：yarn add antd@4.16.12
兼容antd3的Icon與Form過渡包：yarn add @ant-design/compatible

二、執行

npx -p @ant-design/codemod-v4 antd4-codemod src

三、自動兼容antd3的Icon

antd3的用法

import { Icon } from 'antd';

antd4為了實現Icon按需加載，使用新的寫法

import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';

四、自動兼容antd3的Form

1、antd3與antd4的區別，思想上從高階組件到普通組件轉變

antd4不需要Form.create包裝
antd4校驗成功后的values通過onFinish直接獲取
antd4不需要getFieldDecorator包裝，name rules initialValues 作為組件屬性傳遞

2、antd3的用法

import React from "react";
import { Form, Input, Button } from "antd";
const Demo = ({ form }) => {
  const { getFieldDecorator, validateFields } = form;
  const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });
  };
  return (
    <Form layout="inline" onSubmit={handleSubmit}>
      <Form.Item>
        {getFieldDecorator("username", {
          initialValue: '',       
          rules: [{ required: true, message: "Please input your username!" }]
        })(<Input />)}
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default Form.create()(Demo);

3、antd4新的用法

import React from "react";
import { Form, Input, Button } from "antd";
const Demo = () => {
  const onFinish = values => {
    console.log(values);
  };
  return (
    <Form
      name="basic"
      layout="inline"
      initialValues={{ username: '' }}
      onFinish={onFinish}
    >
      <Form.Item
        label="姓名"
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default Demo;

五、手動兼容antd3的Table

1、scroll={{ x: 'max-content', y: document.body.clientHeight }}
antd3如果不定義y，空數據時，會形成頭部滾動條，antd4解決了這個bug

2、antd4默認width是100%，會造成表格擠壓，建議使用x: 'max-content' 或指定寬度
3、升級antd4后，統一去掉y: document.body.clientHeight，
4、目前table每頁默認10條太少了，升級antd4后，建議默認20條
5、自4.1.0起大於 50 條數據默認會展示 pageSize 切換器，有些antd3頁面不支持分頁，添加showSizeChanger: false

pagination: {
        current: 1,
        pageSize: 30,
        showSizeChanger: false, // 有些antd3頁面不支持分頁，添加showSizeChanger
}

6、antd4的onChange 方法在 pageSize 值改變時也會觸發，會造成兩次請求，原先的兩個回調onChange、onShowSizeChange需要改成一個onChange
7、排序問題，antd4升級后onChange回調第三個參數sorter的columnKey默認undefined，而field有值，需要賦值

handleTableChange = (pagination, filters, sorter) => {
   sorter.columnKey = sorter.field; // antd4升級columnKey默認undefined，field有值
   if (sorter.order === false) sorter = {}; // antd4升級兼容歷史需求

8、表格行是否可選擇antd4增加了preserveSelectedRowKeys配置，默認是false，批量刪除時建議false，如果切換頁面需要保留key，需要添加preserveSelectedRowKeys: true

<Table
    columns={columns}
    dataSource={tableData}
    pagination={this.pagination}
    onChange={this.handleTableChange}
    rowSelection={{
    	selectedRowKeys,
    	onChange: this.tableSelectChange,
    	preserveSelectedRowKeys: true,
    }}

六、手動兼容antd3的Tree

1、antd3支持Tree嵌套TreeSelect.TreeNode，antd4不支持，需要改為Tree.TreeNode
2、組織結構樹Tree，部門width有可能超長，需要添加滾動條

.staffListDeptTree {
    overflow-x: auto;  // 橫向滾動
    white-space: nowrap; // 不換行
  }

七、手動兼容antd3的TreeSelect

1、antd3的TreeSelect的value支持匹配number與string，antd4必須類型一致
2、antd3的TreeSelect的value為空時可賦值null，antd4不能賦值null，可以賦值空數組[]
3、antd4使用虛擬滾動，造成寬度不會自動適應，關閉虛擬滾動

<TreeSelect
     value={changeDept}
     placeholder="搜索或選擇部門"
     dropdownMatchSelectWidth={false} // 關閉虛擬滾動
     onSearch={this.onSearch}
     onChange={this.onChangeDept}
 >
</TreeSelect>

八、手動兼容Upload上傳

antd4官方文檔有個bug，實際結果傳入blob對象時，會轉化為新的File對象，造成一些屬性丟失
需要自己包裝成File

file = new File([file], file.name, { type: file.type });