国际化

通过 <ConfigProvider locale={localeObj}> 传入语言包,以支持多语言。目前 AT 内置的 locale 库支持中英繁日四种语言,覆盖各组件的简单词汇,例如:确定、取消、展开、收起、下一页等, 简单词汇映射表可参考 https://unpkg.com/@txdfe/at/lib/locale/ (ConfigProvider 提供简单组件简单词汇国际化能力,由于日期时间的国际化较为特殊,例如中国的日历是从周一到周日,美国的日历是从周日到周六等,时间相关的组件如 DatePicker 等需要国际化,请查看相应组件文档。)

可通过两种方式设置多语言文案,两种方式接收的对象格式略有不同:

  • 1.设置组件自身 locale 属性
{
  key1: value1,
  key2: value2,
}
  • 2.ConfigProvider 的 locale 属性 (推荐)
{
  component1: {
    key1: value1,
    key2: value2,
  },
  component2: {
    key1: value1,
    key2: value2,
  }
}

优先级顺序为: 组件自身 locale > 最近 ConfigProvider 的 locale > 更远父级 ConfigProvider 的 locale

(注: 由于Dialog.show() Message.show() 等函数式方法的特殊性,他们的将默认读取页面上的 root context。当页面上有多个包含<ConfigProvider/>ReactDOM.render()方法调用时,由第一个渲染的决定 root context)

import { ConfigProvider, DatePicker } from '@txdfe/at';
const localeDatePicker = {
  placeholder: 'localeDatePicker placeholder',
};
const localeGlobal = {
  DatePicker: {
    placeholder: 'localeGlobal placeholder',
  },
};
class App extends React.Component {
  render() {
    return (
      <div>
        <ConfigProvider locale={localeGlobal}>
          <DatePicker /> should be 'localeGlobal placeholder'
        </ConfigProvider>
        <br />
        <br />
        <ConfigProvider locale={localeGlobal}>
          <DatePicker locale={localeDatePicker} /> should be 'localeDatePicker placeholder'
        </ConfigProvider>
      </div>
    );
  }
}

根据引入组件库方式的不同(CDN 直接引用、作为依赖引用),使用语言包的方式略有差异,具体见如下代码:

import { ConfigProvider, DatePicker } from '@txdfe/at';
import enUS from '@txdfe/at/lib/locale/en-us';
// import zhCN from '@txdfe/at/lib/locale/zh-cn';
// import zhTW from '@txdfe/at/lib/locale/zh-tw';
// import jaJP from '@txdfe/at/lib/locale/ja-jp';
// 如果应用中直接引入的是 cdn 文件
// 需要按照下面的方式引入国际化文案文件
// const { ConfigProvider, DatePicker, locale } = window.AT;
// const enUS = locale['en-us'];
class App extends React.Component {
  render() {
    return (
      <ConfigProvider locale={enUS}>
        <DatePicker />
      </ConfigProvider>
    );
  }
}

如果内置的 locale 库不满足你的需求(比如想支持法语、德语、西班牙语),你也可以参考 https://unpkg.com/@txdfe/at/lib/locale/ 来自定义语言包,按照如下格式传入给 locale 即可:

{
  DatePicker: {
    datePlaceholder: 'Select date',
    monthPlaceholder: 'Select month',
    yearPlaceholder: 'Select year',
    rangeStartPlaceholder: 'Start date',
    rangeEndPlaceholder: 'End date',
    ok: 'OK',
    clear: 'Clear',
  },
  Dialog: {
      // ...
  },
  // ...
}

通过 API 全局设置语言包

ConfigProvider.initLocales(locales)

配置所有语言包, 可配合 ConfigProvider.setLanguage 方法,确定组件使用的语言包。

ConfigProvider.initLocales({
	'zh-cn': {},
	'en-us': {},
});

ConfigProvider.setLanguage(language)

设置语言,参数 language 需要能在 ConfigProvider.initLocales 方法传入的参数的 key 中找到, 默认为 zh-cn

ConfigProvider.setLanguage('zh-cn');

ConfigProvider.setLocale(locale)

直接设置语言包

// 相当于 同时用ConfigProvider.initLocales 和 ConfigProvider.setLanguage
ConfigProvider.setLocale({
  DatePicker: {},
  Dialog: {},
});