一.利用npm安装React-intl.
由于浏览器差异问题,有时候也会在React-intl基础上另外安装intl.
npm install intl --save
二.如何使用<FormattedMessage />这个组件是语言国际化的重点
1.在含有要翻译的内容的UI组件中引入
import {FormattedMessage} from 'react-intl';
2.利用<FormattedMessage />组件处理要翻译的内容
const addSpriteMessage = (
<FormattedMessage
defaultMessage="Add Sprite"
description="Button to add a sprite in the target pane"
id="targetPane.addSprite"
/>
);
1.FormattedMessage中的三个属性,其中defaultMessage就是要翻译的内容.description为对要翻译的内容的一些介绍.id作为
唯一标记要翻译的内容.
2.而后使用addSpriteMessage代替要翻译的内容.
3.定义intl.js文件
import {addLocaleData} from 'react-intl';
import {updateIntl as superUpdateIntl} from 'react-intl-redux';
import {IntlProvider, intlReducer} from 'react-intl-redux';
import locales from '../locale.js';
Object.keys(locales).forEach(locale => {
addLocaleData(locales[locale].localeData);
});
const intlInitialState = {
intl: {
defaultLocale: 'en',
locale: 'en',
messages: locales.en.messages
}
};
const updateIntl = locale => superUpdateIntl({
locale: locale,
messages: locales[locale].messages || locales.en.messages
});
export {
intlReducer as default,
IntlProvider,
intlInitialState,
updateIntl
};
4.生成translations文件
{
"id": "targetPane.addSprite",
"description": "Button to add a sprite in the target pane",
"defaultMessage": "Add Sprite"
}
]
5.创建en.json与zh-Hans.json文件
"message": "Add Sprite"
},
"message": " 添加角色 "
},
6.生成messages.json文件
"en": {
"messages": {
"targetPane.addSprite": "Add Sprite"
}
},
"zh-Hans": {
"messages": {
"targetPane.addSprite": "添加角色"
}
}
}
7.推荐博客
https://segmentfault.com/a/1190000005824920
http://blog.csdn.net/ling369523246/article/details/52943744