一.安装
npm install react-intl --save
二.创建需要切换语言的js文件
三.在整个项目的入口函数处引入 react-intl:
app.js配置
1.
import { IntlProvider, addLocaleData } from 'react-intl';
2.addLocaleData:引入本地的 localedata
IntlProvider:包裹需要翻译的组件,用来传递给子类语言信息
载入本地 localedata 语言数据:
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
这个是react-intl内置的语言数据
3.载入之前建立的需翻译国家语言的 js文件:
import zhCN from './language/zh';
import zhHK from './language/hk';
import enUS from './language/en';
4.定义 messages 和locale
messages是render()时IntlProvider组件所传的props,属性名固定
messages返回值为映射表,与浏览器语言对应
messages:传递多国语言JS 内的翻译语句
locale:传递当前的语言是什么语言
根据你的需要设置:
componentWillMount() {
let self = this;
if (localStorage.lang) {
if (localStorage.lang === 'zh') {
self.setState({
locale: 'zh',
messages: zhCN
});
} else if(localStorage.lang === 'en'){
self.setState({
locale: 'en',
messages: enUS
});
}else{
self.setState({
locale: 'zh',
messages: zhHK
});
}
} else {
self.setState({
locale: 'en',
messages: enUS
});
}
}
附上浏览器languages大全:
“af”, “sq”, “ar-SA”, “ar-IQ”, “ar-EG”, “ar-LY”, “ar-DZ”, “ar-MA”, “ar-TN”, “ar-OM”, “ar-YE”, “ar-SY”, “ar-JO”, “ar-LB”, “ar-KW”, “ar-AE”, “ar-BH”, “ar-QA”, “eu”, “bg”, “be”, “ca”, “zh-TW”, “zh-CN”, “zh-HK”, “zh-SG”, “hr”, “cs”, “da”, “nl”, “nl-BE”, “en”, “en-US”, “en-EG”, “en-AU”, “en-GB”, “en-CA”, “en-NZ”, “en-IE”, “en-ZA”, “en-JM”, “en-BZ”, “en-TT”, “et”, “fo”, “fa”, “fi”, “fr”, “fr-BE”, “fr-CA”, “fr-CH”, “fr-LU”,“gd”, “gd-IE”, “de”, “de-CH”, “de-AT”, “de-LU”, “de-LI”, “el”, “he”, “hi”, “hu”,“is”, “id”, “it”, “it-CH”, “ja”, “ko”, “lv”, “lt”, “mk”, “mt”, “no”, “pl”, “pt-BR”, “pt”, “rm”, “ro”, “ro-MO”, “ru”, “ru-MI”, “sz”, “sr”, “sk”, “sl”, “sb”,“es”, “es-AR”, “es-GT”, “es-CR”, “es-PA”, “es-DO”, “es-MX”, “es-VE”, “es-CO”, “es-PE”, “es-EC”, “es-CL”, “es-UY”, “es-PY”, “es-BO”, “es-SV”, “es-HN”, “es-NI”,“es-PR”, “sx”, “sv”, “sv-FI”, “th”, “ts”, “tn”, “tr”, “uk”, “ur”, “ve”, “vi”, “xh”,“ji”, “zu”
5.载入语言数据
addLocaleData([...en, ...zh]);
6.IntlProvider包裹需要翻译的组件
render() {
return (
<IntlProvider locale={this.state.locale} messages={this.state.messages}>
<Router history={history}>
<Root />
</Router>
</IntlProvider>
);
}
app.js 入口文件的全部配置
import React, { Component } from 'react';
import {Router} from 'react-router-dom'
import Root from './root';
import zhCN from './language/zh';
import zhHK from './language/hk';
import enUS from './language/en';
import { IntlProvider, addLocaleData } from 'react-intl';
import createHistory from "history/createHashHistory";
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
addLocaleData([...en, ...zh]);
const history = createHistory();
class App extends Component {
componentWillMount() {
let self = this;
if (localStorage.lang) {
if (localStorage.lang === 'zh') {
self.setState({
locale: 'zh',
messages: zhCN
});
} else if(localStorage.lang === 'en'){
self.setState({
locale: 'en',
messages: enUS
});
}else{
self.setState({
locale: 'zh',
messages: zhHK
});
}
} else {
self.setState({
locale: 'en',
messages: enUS
});
}
}
render() {
return (
<IntlProvider locale={this.state.locale} messages={this.state.messages}>
<Router history={history}>
<Root />
</Router>
</IntlProvider>
);
}
}
export default App;
四.在需要翻译的组件中引入
import { injectIntl } from "react-intl";
import { withRouter } from "react-router-dom";
class Instructions extends React.Component {
}
Instructions = withRouter(injectIntl(Instructions));
export default Instructions;
使用
const { intl } = this.props;
let cart1 = intl.formatMessage({ id: "cart.cart1" });
使用时一般用大括号包裹{cart1}