如何使用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 中使用國際化功能了。