如何使用AntDesign的国际化功能

Ant Design 提供了一种简单而灵活的方式来实现国际化的功能。首先，您需要引入 ConfigProvider 组件并设置 locale 属性为所需的语言，然后在 ConfigProvider 组件的子组件中使用 FormattedMessage 组件来包裹需要国际化的文本。

以下是一个示例代码，演示如何在 Ant Design 中使用国际化功能：

import { ConfigProvider, message } from 'antd';
import { FormattedMessage } from 'react-intl';
import zhCN from 'antd/es/locale/zh_CN';
import enUS from 'antd/es/locale/en_US';

const locale = 'en'; // 设置语言
const messages = {
  'en': enUS,
  'zh': zhCN,
};

const App = () => {
  return (
    <ConfigProvider locale={messages[locale]}>
      <div>
        <FormattedMessage id="hello" defaultMessage="Hello World!" />
        <button onClick={() => message.success(<FormattedMessage id="success" defaultMessage="Success!" />)}>Click Me</button>
      </div>
    </ConfigProvider>
  );
};

export default App;

在上面的示例中，我们引入了 ConfigProvider、FormattedMessage 和 message 组件，并设置了 locale 属性为 messages[locale]，其中 messages 是一个包含不同语言对应的 Ant Design 组件 locale 的对象。然后我们在需要国际化的文本中使用 <FormattedMessage> 组件，并通过 id 属性指定对应的 key，defaultMessage 属性指定默认文本。

当用户点击按钮时，会弹出一个成功提示框，其中的文本也使用了 <FormattedMessage> 组件进行国际化处理。

通过以上步骤，您就可以在 Ant Design 中使用国际化功能了。