LocaleProvider国际化
为组件内建文案提供统一的国际化支持。
使用#
LocaleProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。
import enUS from 'antd/lib/locale-provider/en_US';
...
return <LocaleProvider locale={enUS}><App /></LocaleProvider>;
我们提供了英语,中文,俄语,法语,德语等多种语言支持,所有语言包可以在 这里 找到。
注意:如果你需要使用 UMD 版的 dist 文件,应该引入 antd/dist/antd-with-locales.js
,然后按以下方式使用:
const { LocaleProvider, locales } = window.antd;
...
return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
增加语言包#
如果你找不到你需要的语言包,欢迎你在 英文语言包 的基础上创建一个新的语言包,并给我们 Pull Request。
其他国际化需求#
本模块仅用于组件的内建文案,若有业务文案的国际化需求,建议使用 react-intl,可参考示例:Intl demo 1 和 Intl demo 2。
代码演示
import { Pagination, LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
const App = () => (
<div>
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</div>
);
ReactDOM.render(
<LocaleProvider locale={enUS}>
<App />
</LocaleProvider>
, mountNode);
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('en');
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
const columns = [{
title: 'Name',
dataIndex: 'name',
filters: [{
text: 'filter1',
value: 'filter1',
}],
}, {
title: 'Age',
dataIndex: 'age',
}];
class Page extends React.Component {
state = {
visible: false,
}
showModal = () => {
this.setState({ visible: true });
}
hideModal = () => {
this.setState({ visible: false });
}
render() {
const info = () => {
Modal.info({
title: 'some info',
content: 'some info',
});
};
const confirm = () => {
Modal.confirm({
title: 'some info',
content: 'some info',
});
};
return (
<div className="locale-components">
<div className="example">
<Pagination defaultCurrent={1} total={50} showSizeChanger />
</div>
<div className="example">
<Select showSearch style={{ width: 200 }}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
</Select>
<DatePicker />
<TimePicker />
<RangePicker style={{ width: 200 }} />
</div>
<div className="example">
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
<Button onClick={info}>Show info</Button>
<Button onClick={confirm}>Show confirm</Button>
<Popconfirm title="Question?">
<a href="#">Click to confirm</a>
</Popconfirm>
</div>
<div className="example">
<Transfer
dataSource={[]}
showSearch
targetKeys={[]}
render={item => item.title}
/>
</div>
<div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} value={moment()} />
</div>
<div className="example">
<Table dataSource={[]} columns={columns} />
</div>
<Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
<p>Locale Modal</p>
</Modal>
</div>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
locale: enUS,
};
}
changeLocale = (e) => {
const localeValue = e.target.value;
this.setState({ locale: localeValue });
if (!localeValue) {
moment.locale('zh-cn');
} else {
moment.locale('en');
}
}
render() {
return (
<div>
<div className="change-locale">
<span style={{ marginRight: 16 }}>Change locale of components: </span>
<Radio.Group defaultValue={enUS} onChange={this.changeLocale}>
<Radio.Button key="en" value={enUS}>English</Radio.Button>
<Radio.Button key="cn">中文</Radio.Button>
</Radio.Group>
</div>
<LocaleProvider locale={this.state.locale}><Page /></LocaleProvider>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
.locale-components {
border-top: 1px solid #d9d9d9;
padding-top: 16px;
}
.example {
margin: 16px 0;
}
.example > * {
margin-right: 8px;
}
.change-locale {
margin-bottom: 16px;
}
API#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
locale | 语言包配置,语言包可到 antd/lib/locale-provider/ 目录下寻找 | object | - |