1.antd 目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案。
import zhCN from 'antd/lib/locale-provider/zh_CN';
return (
<LocaleProvider locale={zhCN}>
<App />
</LocaleProvider>
);
2.react-intl
2.1在src目录下新建locale文件夹,存才语言包
zh-CN.js
const zh_CN = {
'helloworld': "你好!",
'name': '我的名字是 {name}'
}
export default zh_CN;
en-US.js
const en_US = {
'helloworld': "helloworld",
'name': 'my name is {name}'
}
export default en_US;
2.2 App.js
import React, { Component } from 'react';
import zhCN from './locale/zh-CN.js';
import enUS from './locale/en-US.js';
import {IntlProvider, FormattedMessage,addLocaleData,injectIntl} from 'react-intl';
import zhData from 'react-intl/locale-data/zh';
addLocaleData(zhData);//必须写,设置语言的种类
const Demo = ({intl}) => (
<div >
{intl.formatMessage({id:'helloworld'})}
{intl.formatMessage({id:'name'},{name:'Tom'})}
</div>
);
const DomeWraper=injectIntl(Demo);
class App extends Component {
constructor(props){
super(props);
this.cn=this.cn.bind(this);
this.en=this.en.bind(this);
}
state={
lang:'en'
}
cn(){
this.setState({
lang:'zh'
})
}
en(){
this.setState({
lang:'en'
})
}
render() {
let messages = {}
messages['en'] = enUS;
messages['zh'] = zhCN;
return (
<IntlProvider locale={this.state.lang} messages={messages[this.state.lang]}>
<div>
<div>
<button onClick={this.cn}>中文</button>
<button onClick={this.en}>English</button>
</div>
<FormattedMessage id="helloworld" /><br/>
<FormattedMessage id="name" values={{name:'Jack'}} />
<DomeWraper/>
</div>
</IntlProvider>
);
}
}
export default App ;