国际化 #

概述 #

Ant Design 提供了完善的国际化支持，通过 ConfigProvider 组件可以配置语言包，实现多语言切换。

基础用法 #

设置语言 #

tsx

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';

<ConfigProvider locale={zhCN}>
  <App />
</ConfigProvider>

支持的语言 #

tsx

import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import zhTW from 'antd/locale/zh_TW';
import jaJP from 'antd/locale/ja_JP';
import koKR from 'antd/locale/ko_KR';
import arEG from 'antd/locale/ar_EG';

语言切换 #

tsx

import { ConfigProvider, Button, Space, DatePicker } from 'antd';
import { useState } from 'react';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/en';

const App = () => {
  const [locale, setLocale] = useState(zhCN);

  const changeLocale = (newLocale) => {
    setLocale(newLocale);
    dayjs.locale(newLocale.locale === 'zh-cn' ? 'zh-cn' : 'en');
  };

  return (
    <ConfigProvider locale={locale}>
      <Space direction="vertical">
        <Space>
          <Button onClick={() => changeLocale(zhCN)}>中文</Button>
          <Button onClick={() => changeLocale(enUS)}>English</Button>
        </Space>
        <DatePicker />
      </Space>
    </ConfigProvider>
  );
};

日期组件国际化 #

tsx

import { ConfigProvider, DatePicker } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import weekday from 'dayjs/plugin/weekday';
import localeData from 'dayjs/plugin/localeData';

dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale('zh-cn');

<ConfigProvider locale={zhCN}>
  <DatePicker />
</ConfigProvider>

自定义语言包 #

tsx

import { ConfigProvider } from 'antd';

const customLocale = {
  locale: 'zh-cn',
  Pagination: {
    items_per_page: '条/页',
    jump_to: '跳至',
    page: '页',
    prev_page: '上一页',
    next_page: '下一页',
    prev_5: '向前 5 页',
    next_5: '向后 5 页',
    prev_3: '向前 3 页',
    next_3: '向后 3 页',
  },
  DatePicker: {
    lang: {
      placeholder: '请选择日期',
      rangePlaceholder: ['开始日期', '结束日期'],
      today: '今天',
      now: '此刻',
      ok: '确定',
      timeSelect: '选择时间',
      dateSelect: '选择日期',
    },
  },
};

<ConfigProvider locale={customLocale}>
  <App />
</ConfigProvider>

RTL 支持 #

tsx

import { ConfigProvider, Button, Space } from 'antd';
import arEG from 'antd/locale/ar_EG';

<ConfigProvider
  locale={arEG}
  direction="rtl"
>
  <Space>
    <Button type="primary">按钮</Button>
    <Button>按钮</Button>
  </Space>
</ConfigProvider>

完整示例 #

tsx

import { ConfigProvider, Button, Space, DatePicker, Pagination, Table } from 'antd';
import { useState } from 'react';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import dayjs from 'dayjs';

const App = () => {
  const [locale, setLocale] = useState(zhCN);
  const [direction, setDirection] = useState('ltr');

  const changeLocale = (newLocale) => {
    setLocale(newLocale);
    dayjs.locale(newLocale.locale);
  };

  return (
    <ConfigProvider locale={locale} direction={direction}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Space>
          <Button onClick={() => changeLocale(zhCN)}>中文</Button>
          <Button onClick={() => changeLocale(enUS)}>English</Button>
          <Button onClick={() => setDirection(direction === 'ltr' ? 'rtl' : 'ltr')}>
            切换 RTL
          </Button>
        </Space>
        <DatePicker />
        <Pagination total={100} />
      </Space>
    </ConfigProvider>
  );
};

API #

ConfigProvider locale #

属性	说明	类型	默认值
locale	语言包	object	-
direction	文本方向	`ltr` \| `rtl`	`ltr`

语言包结构 #

typescript

interface Locale {
  locale: string;
  Pagination?: Object;
  DatePicker?: Object;
  TimePicker?: Object;
  Calendar?: Object;
  Table?: Object;
  Modal?: Object;
  Popconfirm?: Object;
  Transfer?: Object;
  Select?: Object;
  Upload?: Object;
}

最佳实践 #

1. 结合 react-intl #

tsx

import { ConfigProvider } from 'antd';
import { IntlProvider } from 'react-intl';
import zhCN from 'antd/locale/zh_CN';
import zhMessages from './locales/zh.json';

const App = () => {
  return (
    <IntlProvider locale="zh" messages={zhMessages}>
      <ConfigProvider locale={zhCN}>
        <App />
      </ConfigProvider>
    </IntlProvider>
  );
};

2. 持久化语言设置 #

tsx

import { ConfigProvider } from 'antd';
import { useState, useEffect } from 'react';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';

const App = () => {
  const [locale, setLocale] = useState(zhCN);

  useEffect(() => {
    const savedLocale = localStorage.getItem('locale');
    if (savedLocale === 'en') {
      setLocale(enUS);
    }
  }, []);

  const changeLocale = (newLocale) => {
    setLocale(newLocale);
    localStorage.setItem('locale', newLocale.locale === 'en-us' ? 'en' : 'zh');
  };

  return (
    <ConfigProvider locale={locale}>
      <App />
    </ConfigProvider>
  );
};

下一步 #

接下来学习 ConfigProvider 全局配置组件！