react i18n 实现国际化

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

当然首先就要npm install

npm installreact-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": "u7ba1u7406u540eu53f0","POSTS": "u6240u6709u535au6587","Posts": "u535au6587","Post Categories":"u535au6587u5206u7c7b","GALLERIES": "u6240u6709u753bu5eca","Galleries": "u753bu5eca","ENQUIRIES": "u67e5u8be2u6240u6709","Enquiries": "u67e5u8be2","YS": "u7ba1u7406","Ys": "u7ba1u7406","OTHERS": "u5176u4ed6","Users": "u7528u6237u7ba1u7406","TEST": "u6d4bu8bd5","Test": "u6d4bu8bd5","Tests": "u6d4bu8bd5"
  }
}

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

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!