react i18n 实现国际化

来个前端工作吧：[e-mail] qq:2260410070

为了让react 实现本地语言，就需要i18n

当然首先就要npm install

npm install react-intl --save

安装好intl，这个组件依赖react 版本为 0.14.0 以上 或者 15.0.0以上

如果是0.13.0 的 就要对react 升级，主要 

0.14以后react 对组件进行了分离，分为 react 和react-dom 还有react-addons

正文开始

建立语言文件：data.json  汉字进行Unicode编码转换

{  "en": {  "BackManage": "Backstage Management",  "POSTS": "POSTS",    "Posts": "Posts",    "Post Categories":"Post Categories",    "GALLERIES": "GALLERIES",    "Galleries": "Galleries",    "ENQUIRIES": "ENQUIRIES",    "Enquiries": "Enquiries",    "YS": "YS",    "Ys": "Ys",    "OTHERS": "OTHERS",    "TEST": "TEST",    "Users": "Users",    "Test": "Test",    "Tests": "Tests"  },  "zh": {  "BackManage": "\u7ba1\u7406\u540e\u53f0",  "POSTS": "\u6240\u6709\u535a\u6587",    "Posts": "\u535a\u6587",    "Post Categories":"\u535a\u6587\u5206\u7c7b",    "GALLERIES": "\u6240\u6709\u753b\u5eca",    "Galleries": "\u753b\u5eca",    "ENQUIRIES": "\u67e5\u8be2\u6240\u6709",    "Enquiries": "\u67e5\u8be2",    "YS": "\u7ba1\u7406",    "Ys": "\u7ba1\u7406",    "OTHERS": "\u5176\u4ed6",    "Users": "\u7528\u6237\u7ba1\u7406",    "TEST": "\u6d4b\u8bd5",    "Test": "\u6d4b\u8bd5",    "Tests": "\u6d4b\u8bd5"  }}

创建 Translate.js 组件

import { IntlProvider, addLocaleData } from 'react-intl';

这个需要 intlprovider 用来传递 给子类 语言信息

import React, { Component }  from 'react';import ReactDOM from 'react-dom';import { IntlProvider, addLocaleData } from 'react-intl';import localeData from '../../translations/data.json';import en from 'react-intl/locale-data/en';import zh from 'react-intl/locale-data/zh';//需要本地化的语言addLocaleData([...en, ...zh]);//获取本地语言const language = (navigator.languages && navigator.languages[0]) ||                     navigator.language ||                     navigator.userLanguage;const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];//messages data.json 里对应的 语言文本const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh;class Translate extends Component {constructor(props) {        super(props);    }    render() {        //this.props.Template 父级传来的 this.props.Template    return (    <IntlProvider locale={ language } messages={ messages }>    {this.props.Template}    </IntlProvider>    );    }}module.exports = Translate;

父级组件

import React, { Component }  from 'react';import ReactDOM from 'react-dom';import HomeDetail from './home-detail';import Translate from './translate';class HomeView extends Component {  constructor(props) {        super(props);    }    render() {        return (          <Translate Template={<HomeDetail/>}/>        );    }}ReactDOM.render(<HomeView />, document.getElementById('home-view'));

需要实现 本地化的 view 组件

引入 

import { FormattedMessage } from 'react-intl';

react-intl 还有其他很多 功能  时间

<FormattedMessage id={×××} />  id 值就是你要的显示的文字  当然还可以有其他属性

description='say hello todescription'
defaultMessage='Hello, defaultMessage'

import React, { Component } from 'react';import { FormattedMessage } from 'react-intl';export default class HomeDetail extends Component {    constructor(props) {        super(props);    }    renderFlatNav() {return index.lists.map((list) => {var href = list.external ? list.path : '/index/' + list.path;return (<h3 key={list.path}><a href={href}><FormattedMessage id={list.label} /> </a></h3>);});}renderGroupedNav() {return (<div>{index.nav.sections.map((navSection) => {return (<div className="nav-section" key={navSection.key}><h4><FormattedMessage id={navSection.label} /> </h4><ul>{navSection.lists.map((list) => {var href = list.external ? list.path : '/index/' + list.path;return (<li key={list.path}><a href={href}><FormattedMessage id={list.label}/> </a></li>);})}</ul></div>);})}{(() => {if (!index.orphanedLists.length) return;return (<div className="nav-section"><h4><FormattedMessage id={'OTHERS'} /> </h4><ul>{index.orphanedLists.map((list) => {return (<li key={list.path}><a href={'/index/' + list.path}><FormattedMessage id={list.label}/> </a></li>);})}</ul></div>);})()}</div>);}    render() {        return (            <div><div className="page-header"><h1><FormattedMessage id={'BackManage'} /> </h1></div><div className="index-lists">{index.nav.flat ? this.renderFlatNav() : this.renderGroupedNav()}</div></div>        );    }}

直接传递字符串时 需要通过defineMessages 来对字符进行转换

import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';const messages = defineMessages({    placeholder: {id: 'inputfilter'},});var test = React.createClass({getInitialState () {return {formatMessage: this.props.intl['formatMessage'],};},render() {return (<FormInput placeholder={this.state.formatMessage(messages.placeholder)} />)}});module.exports = injectIntl(test);