react i18n 实现国际化

为了让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 (
	    	
	    		{this.props.Template}
	    	
	    );
    }
}

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 (
          }/>
        );
    }

}

ReactDOM.render(, document.getElementById('home-view'));

需要实现 本地化的 view 组件

引入 

import { FormattedMessage } from 'react-intl';

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

 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 (
				

					
						 
					
				
			);
		});
	}

	renderGroupedNav() {
		return (
			

				{index.nav.sections.map((navSection) => {
					return (
						

							

								 
							
							

								{navSection.lists.map((list) => {
									var href = list.external ? list.path : '/index/' + list.path;
									return (
										

											
												 
											
										
									);
								})}
							
						
					);
				})}
				{(() => {
					if (!index.orphanedLists.length) return;
					return (
						

							

								 
							
							

								{index.orphanedLists.map((list) => {
									return (
										

											
												 
											
										
									);
								})}
							
						
					);
				})()}
			
		);
	}

    render() {
        return (
            

				

					

						 
					
				
				
{index.nav.flat ? this.renderFlatNav() : this.renderGroupedNav()}
			
        );
    }

}

直接传递字符串时 需要通过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 (
			
		)
	}
});
module.exports = injectIntl(test);

有需要的交流的可以加个好友