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": "\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>
        );
    }

}

react i18n 实现国际化

猜你在找的React相关文章