locale

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 ;

猜你喜欢

转载自blog.csdn.net/Night_Emperor/article/details/82823439