国际化

通过 <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: {},
});