antd3升级antd5总结

从v3到v4教程

从v4到v5教程

export 'Icon' (imported as 'Icon') was not found in 'antd'

在 Ant Design 5 中，Icon 组件的使用方式有所变化。Ant Design 不再直接导出 Icon 组件，而是建议使用 @ant-design/icons 包来引入图标。这是为了更好地支持按需加载和减小打包体积。

import { Icon } from 'antd';
<Icon type="setting" />

变成

import { SettingOutlined } from '@ant-design/icons';
<SettingOutlined />

可以在同一个文件统一引入包装一层

form.create和getFieldDecorator不能用了

移除了 Form.create 方法，form 现可由 Form.useForm 获取

如果要继续使用可以安装 npm install --save @ant-design/compatible@v4-compatible-v3

主题变量

app根组件

<ConfigProvider
    theme={{
        token: {
            colorPrimary: '#00b082',
            colorInfo: '#00b082',
            borderRadius: 6,
        },
        components: {
            Menu: {
                itemHeight: 44, // 菜单项高度
            },
        },
    }}
>
</ConfigProvider>

子组件中如何获取主题变量

import { theme } from 'antd';
const { useToken } = theme;

const Test = () => {
    const { token } = useToken();
    console.log(token.colorPrimary)
}

tree组件的子组件TreeNode被废弃，请使用treeData代替

控制台会有警告但是还可以使用

index.js:119 Warning: children of Tree is deprecated. Please use treeData instead.

Modal组件

visible属性被open属性替代

bodyStyle={{ display: 'flex'}} 改成styles={{body: { display: 'flex'}}}

Warning: antd: message Static function can not consume context like dynamic theme. Please use 'App' component instead.

这个警告信息是 Ant Design 5.x 版本引入的一个新限制，表示静态方法（例如 message.success, message.error 等）不能像动态主题那样消费上下文（context）。Ant Design 建议使用 App 组件来包裹你的应用，以便正确地处理上下文。

解决方法1

import { App } from 'antd';
const mymessage = () => {
    const { message, modal, notification } = App.useApp()
    const showMessage = () => { message.success('Success!'); }
}

参考

解决方法2

定义MessageProvider组件

import React, { createContext, useContext } from 'react';
import { App, message } from 'antd';
import PropTypes from 'prop-types';

const MessageContext = createContext();
// 使用MessageProvider包裹自己的组件调用message可以获取context或redux的内容，因为外面有App包裹
export const MessageProvider = ({ children }) => {
    return (
        <App>
            <MessageContext.Provider value={message}>
                {children}
            </MessageContext.Provider>
        </App>
    );
};

MessageProvider.propTypes = {
    children: PropTypes.element,
};

export const useMessage = () => useContext(MessageContext);

使用MessageProvider组件

1、定义MyComponent组件

import React from 'react';
import { useMessage } from './MessageProvider';
const MyComponent = () => {
  const message = useMessage();
  const handleClick = () => {
    message.success('This is a success message');
  };
  return (
    <div>
      <button onClick={handleClick}>Show Message</button>
    </div>
  );
};
export default MyComponent;

2、在MyApp.js中使用MessageProvider包裹MyComponent组件

import React from 'react';
import { MessageProvider } from '../components/MessageProvider';
import MyComponent from '../components/MyComponent';
function MyApp() {
  return (
    <MessageProvider>
      <MyComponent />
    </MessageProvider>
  );
}
export default MyApp;

table组件Warning: Each child in a list should have a unique "key" prop.

table设置rowKey属性 rowKey={({ questionId }) => ${questionId}}

Modal.confirm改变确认按钮颜色

Modal.confirm({
    title: '确认删除吗？',
    content: '删除后将无法使用该文章',
    okText: '确认',
    cancelText: '取消',
    okButtonProps: {
        style: {
            backgroundColor: '#00b082', // 自定义确认按钮的背景颜色
            borderColor: '#00b082', // 自定义确认按钮的边框颜色
        },
    },
    onOk: async () => {
    },
});

table表头文字居中，内容居左怎么设置？

通过设置columns

const columns = [
    {
        title: <div style={{ textAlign: 'center' }}>数量</div>,
        dataIndex: 'count',
        key: 'count',
        align: 'left',
        width: 260,
    },
]

table怎么设置表头固定，表体超出高度滚动

<Table
    className={cx('z-table')}
    bordered
    columns={getColumns(onDetail)}
    scroll={{ y: 666 }}
    size="middle"
    dataSource={tableData}
    rowKey={({ code }) => code}
    pagination={false}
/>

设置 scroll={{ y: 666 }},表格即可滚动

antd-style包需要react版本是18，因为依赖react18中的startTransition

设置table内的滚动条样式可以使用antd-style采用css in js语法