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"
  }
}

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

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'));

引入 

import { FormattedMessage } from '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);

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