LocaleProvider国际化

为组件内建文案提供统一的国际化支持。

使用

LocaleProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。

  1. import { LocaleProvider } from 'antd';
  2. import zh_CN from 'antd/lib/locale-provider/zh_CN';
  3. import moment from 'moment';
  4. import 'moment/locale/zh-cn';
  5. moment.locale('zh-cn');
  6. ...
  7. return <LocaleProvider locale={zh_CN}><App /></LocaleProvider>;

我们提供了英语,中文,俄语,法语,德语等多种语言支持,所有语言包可以在 这里 找到。

注意:如果你需要使用 UMD 版的 dist 文件,应该引入 antd/dist/antd-with-locales.js,同时引入 moment 对应的 locale,然后按以下方式使用:

  1. const { LocaleProvider, locales } = window.antd;
  2. ...
  3. return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;

增加语言包

如果你找不到你需要的语言包,欢迎你在 英文语言包 的基础上创建一个新的语言包,并给我们 Pull Request。

其他国际化需求

本模块仅用于组件的内建文案,若有业务文案的国际化需求,建议使用 react-intl,可参考示例:Intl demo 1Intl demo 2

代码演示

LocaleProvider国际化 - 图1

国际化

LocaleProvider 包裹你的应用,并引用对应的语言包。

  1. import { Pagination, LocaleProvider } from 'antd';
  2. import zhCN from 'antd/lib/locale-provider/zh_CN';
  3. const App = () => (
  4. <div>
  5. <Pagination defaultCurrent={1} total={50} showSizeChanger />
  6. </div>
  7. );
  8. ReactDOM.render(
  9. <LocaleProvider locale={zhCN}>
  10. <App />
  11. </LocaleProvider>,
  12. mountNode,
  13. );

LocaleProvider国际化 - 图2

所有组件

此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。

  1. import {
  2. LocaleProvider,
  3. Pagination,
  4. DatePicker,
  5. TimePicker,
  6. Calendar,
  7. Popconfirm,
  8. Table,
  9. Modal,
  10. Button,
  11. Select,
  12. Transfer,
  13. Radio,
  14. } from 'antd';
  15. import zhCN from 'antd/lib/locale-provider/zh_CN';
  16. import moment from 'moment';
  17. import 'moment/locale/zh-cn';
  18. moment.locale('en');
  19. const { Option } = Select;
  20. const { RangePicker } = DatePicker;
  21. const columns = [
  22. {
  23. title: 'Name',
  24. dataIndex: 'name',
  25. filters: [
  26. {
  27. text: 'filter1',
  28. value: 'filter1',
  29. },
  30. ],
  31. },
  32. {
  33. title: 'Age',
  34. dataIndex: 'age',
  35. },
  36. ];
  37. class Page extends React.Component {
  38. state = {
  39. visible: false,
  40. };
  41. showModal = () => {
  42. this.setState({ visible: true });
  43. };
  44. hideModal = () => {
  45. this.setState({ visible: false });
  46. };
  47. render() {
  48. const info = () => {
  49. Modal.info({
  50. title: 'some info',
  51. content: 'some info',
  52. });
  53. };
  54. const confirm = () => {
  55. Modal.confirm({
  56. title: 'some info',
  57. content: 'some info',
  58. });
  59. };
  60. return (
  61. <div className="locale-components">
  62. <div className="example">
  63. <Pagination defaultCurrent={1} total={50} showSizeChanger />
  64. </div>
  65. <div className="example">
  66. <Select showSearch style={{ width: 200 }}>
  67. <Option value="jack">jack</Option>
  68. <Option value="lucy">lucy</Option>
  69. </Select>
  70. <DatePicker />
  71. <TimePicker />
  72. <RangePicker style={{ width: 200 }} />
  73. </div>
  74. <div className="example">
  75. <Button type="primary" onClick={this.showModal}>
  76. Show Modal
  77. </Button>
  78. <Button onClick={info}>Show info</Button>
  79. <Button onClick={confirm}>Show confirm</Button>
  80. <Popconfirm title="Question?">
  81. <a href="#">Click to confirm</a>
  82. </Popconfirm>
  83. </div>
  84. <div className="example">
  85. <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
  86. </div>
  87. <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
  88. <Calendar fullscreen={false} value={moment()} />
  89. </div>
  90. <div className="example">
  91. <Table dataSource={[]} columns={columns} />
  92. </div>
  93. <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
  94. <p>Locale Modal</p>
  95. </Modal>
  96. </div>
  97. );
  98. }
  99. }
  100. class App extends React.Component {
  101. constructor() {
  102. super();
  103. this.state = {
  104. locale: null,
  105. };
  106. }
  107. changeLocale = e => {
  108. const localeValue = e.target.value;
  109. this.setState({ locale: localeValue });
  110. if (!localeValue) {
  111. moment.locale('en');
  112. } else {
  113. moment.locale('zh-cn');
  114. }
  115. };
  116. render() {
  117. const { locale } = this.state;
  118. return (
  119. <div>
  120. <div className="change-locale">
  121. <span style={{ marginRight: 16 }}>Change locale of components: </span>
  122. <Radio.Group defaultValue={undefined} onChange={this.changeLocale}>
  123. <Radio.Button key="en" value={undefined}>
  124. English
  125. </Radio.Button>
  126. <Radio.Button key="cn" value={zhCN}>
  127. 中文
  128. </Radio.Button>
  129. </Radio.Group>
  130. </div>
  131. <LocaleProvider locale={locale}>
  132. <Page
  133. key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
  134. />
  135. </LocaleProvider>
  136. </div>
  137. );
  138. }
  139. }
  140. ReactDOM.render(<App />, mountNode);
  1. .locale-components {
  2. border-top: 1px solid #d9d9d9;
  3. padding-top: 16px;
  4. }
  5. .example {
  6. margin: 16px 0;
  7. }
  8. .example > * {
  9. margin-right: 8px;
  10. }
  11. .change-locale {
  12. margin-bottom: 16px;
  13. }

API

参数说明类型默认值
locale语言包配置,语言包可到 antd/lib/locale-provider 目录下寻找object-