Chuẩn bị nâng cấp

Cập nhật React lên phiên bản 16.14.0: yarn add react@16.14.0
Cập nhật React-DOM lên phiên bản 16.14.0: yarn add react-dom@16.14.0
Thêm Ant Design 4 mới nhất: yarn add antd@4.16.12
Tải gói tương thích với Icon và Form của Ant Design 3: yarn add @ant-design/compatible

Quá trình thực hiện

Sử dụng lệnh sau để tự động chuyển đổi mã nguồn:
npx -p @ant-design/codemod-v4 antd4-codemod src

Tương thích Icon trong Ant Design 4

Ví dụ sử dụng Icon trong Ant Design 3:

import { Icon } from 'antd';

Trong Ant Design 4, dùng cách gọi khác để tối ưu tải tài nguyên:

import { MinusOutlined, PlusOutlined } from '@ant-design/icons';

Tương thích Form trong Ant Design 4

Khác biệt giữa Ant Design 3 và 4

• Không cần sử dụng Form.create().
• Giá trị trả về khi form hợp lệ được lấy trực tiếp qua hàm onFinish.
• Khai báo các thuộc tính như name, rules, initialValues ngay trong component.

Ví dụ Form trong Ant Design 3:

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

Ví dụ Form trong Ant Design 4:

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}
    >
      
        <Input />
      
      
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      
    </Form>
  );
};
export default Demo;

Tương thích Table trong Ant Design 4

Một số thay đổi quan trọng:

• Sử dụng scroll={{ x: 'max-content' }} để tránh vấn đề cuộn ngang không mong muốn.
• Đặt giá trị mặc định cho mỗi trang là 20 dòng thay vì 10.
• Thay đổi cấu hình showSizeChanger: false nếu không hỗ trợ thay đổi kích thước trang.

Tương thích TreeSelect và Upload trong Ant Design 4

Cần chú ý đến việc đảm bảo kiểu dữ liệu đồng nhất trong TreeSelect và xử lý các thuộc tính của file trong Upload.