React-intl Internationaliztion API

API应用环境

• React-intl的应用依赖于Internationaliztion API，这些APIs现代浏览器和NodeJS（>0.12）内涵；

• 对于老版浏览器需要搭建一些环境；

React-intl简要介绍

• React-intl是FormatJS的一部分，内置实现Date/Number/Time的国际格式化；

• 可以自定义映射关系，完成值对之间的替换（这是这篇文章的主要内容）；

• 通过获取浏览器的language来设置显示中文/英文（通过自定义映射，而非自动全文转换）；

• 常用于实现静态内容，如按钮文字，公司名称的转换；

React框架结合国际化所需要的依赖包

"babel-core": "^6.22.1","babel-loader": "^6.2.10","babel-preset-env": "^1.1.8","babel-preset-es2015": "^6.22.0","babel-preset-react": "^6.22.0","copy-webpack-plugin": "^4.0.1","html-webpack-plugin": "^2.26.0","react": "^15.4.2","react-dom": "^15.4.2","react-intl": "^2.2.3","webpack": "^2.2.0","webpack-del-plugin": "0.0.1","webpack-dev-server": "^1.16.2","webpack-notifier": "^1.5.0"

React-intl格式化语法

该部分有详细的介绍，因此忽略

自定义国际型格式化

重点部分：该项目demo单一功能（internationalization） demo中每一部分都有详细的讲解

• 不知道这个功能是很蹩脚，还是蹩脚，网上的例子几乎没有，官网的例子……我已经无言了，建议不要看官网了*

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// 从'react-intl'中引入addLocaleData,IntlProvider,FormattedMessage三个格式化组件；
import {addLocaleData,FormattedMessage} from 'react-intl';
/*
*引入与navigator.languages[0]所对应的语言；
*如果没有引入对应的语言，会使用默认的“en”；
*导致FormattedMessage的映射不会成功；
*/
import zh from 'react-intl/locale-data/zh';
import en from 'react-intl/locale-data/en';
/*
*引入自定义的映射表；
*通过与FormattedMessage的id值来当索引映射返回值；
*/
import zh_CN from './locale/zh_CN';
import en_US from './locale/en_US';
import App from './components/app';
/*
*messages是render()时IntlProvider组件所传的props，属性名固定：messages；
*messages返回值为映射表，比如：'react-intl/locale-data/zh'&&'./locale/zh_CN'；
*/
let messages = {};
messages["en-US"] = en_US;
messages["zh-CN"] = zh_CN;
/*
*获取浏览器设置的语言；
*按我demo中的设置，返回["zh-CN","zh","en-US","en"]，排序与语言设置顺序一直；
*/
const languages = navigator.languages;
const currentLang = languages[0];
console.log("languages: ",languages);
console.log("language: ",currentLang);
// 载入语言数据；
//载入一个addLocaleData(zh);
//载入多个；
addLocaleData([...zh,...en]);

ReactDOM.render(
    // IntlProvider为'react-intl'指定的包裹组件名；
    <IntlProvider locale={currentLang} messages={messages[currentLang]}>
        <App />
    </IntlProvider>,document.body
)

/*
浏览器languages大全：
"af","sq","ar-SA","ar-IQ","ar-EG","ar-LY","ar-DZ","ar-MA","ar-TN","ar-OM","ar-YE","ar-SY","ar-JO","ar-LB","ar-KW","ar-AE","ar-BH","ar-QA","eu","bg","be","ca","zh-TW","zh-CN","zh-HK","zh-SG","hr","cs","da","nl","nl-BE","en","en-EG","en-AU","en-GB","en-CA","en-NZ","en-IE","en-ZA","en-JM","en-BZ","en-TT","et","fo","fa","fi","fr","fr-BE","fr-CA","fr-CH","fr-LU","gd","gd-IE","de","de-CH","de-AT","de-LU","de-LI","el","he","hi","hu","is","id","it","it-CH","ja","ko","lv","lt","mk","mt","no","pl","pt-BR","pt","rm","ro","ro-MO","ru","ru-MI","sz","sr","sk","sl","sb","es","es-AR","es-GT","es-CR","es-PA","es-DO","es-MX","es-VE","es-CO","es-PE","es-EC","es-CL","es-UY","es-PY","es-BO","es-SV","es-HN","es-NI","es-PR","sx","sv","sv-FI","th","ts","tn","tr","uk","ur","ve","vi","xh","ji","zu"];*/

app.js

/*
    基本用法：
    import React,{Component} from 'react';
    import {FormattedMessage} from 'react-intl';
    
    class App extends Component {
        constructor(props) {
            super(props);
        }
        render() {
    
            /* 
            *FormattedMessage组件中的信息parser后显示以<span>包裹的文本；
            *可以通过tagName指定其它标签包裹；
            *以id属性的值"hello"为索引——索引到自定义的映射表'./locale/zh_CN'中去；
            *messages['hello']——messages为父组件IntlProvider的props的messages属性；
            *若没有上述的返回值，则显示defaultMessage的值"React Intl Translations Example";
            */
            /*
            *FormattedMessage添加子元素或ReactElement；
            *  <FormattedMessage id="hello">
            *      {(formattedValue)=>(
            *          <em>{formattedValue}</em>
            *      )}
            *  </FormattedMessage>
            */
            return (
                <div>
                    <h1>
                        <div>
                            <FormattedMessage
                                id="hello"
                                defaultMessage="React Intl Translations Example"
                            />
                        </div>
                    </h1>
    
                    <h4>
                        <FormattedMessage
                            tagName = 'p'
                            id='superHello'
                            defaultMessage="Locales:北京"
                            values={{
                                someone:'zxdobest'
                            }}
                        />
                    </h4>
                    <h2>
                        <FormattedMessage id="hello">
                            {(formattedValue)=>(
                                <em>{formattedValue}</em>
                            )}
                        </FormattedMessage>
                    </h2>
                </div>
            );
        }
    }
    
    export default App;
    */


//
输出HTML块结构；
import React from 'react';
import { injectIntl,intlShape,FormattedMessage } from 'react-intl';

const ChildComponent = ({ intl }) => {
    //传入的{intl}名称不可更改；
    console.log(React.PropTypes)
    const getMessage = intl.messages;
    return(
        <section>
            {/*
                *通过intl.messages获取映射属性的方法；
                * 可以和任意内容（如：HTML标签）组合；
                * */}
            <a>{getMessage.hello}</a>
            {/*通过FormattedMessage格式化，可以传入参数{values}*/}
            <FormattedMessage
                tagName = 'p'
                id='superHello'
                defaultMessage="Locales:北京"
                values={{
                    someone:'zxdobest'
                }}
            />
            {/*
               *这种结构，类同于intl.messages.superHello可以和其它内容任意组合；
               *能且仅能获取superHello的映射；
               * 目前尚未找到如果在第一种方法中传入values；
            */}
            <FormattedMessage id="superHello" values={{
                someone:'mihuartuanr'
            }}>
                {(formattedValue)=>(
                    <p>{formattedValue}</p>
                )}
            </FormattedMessage>
        </section>
    );
}

ChildComponent.propTypes = {
    intl: intlShape.isRequired
}

export default injectIntl(ChildComponent);

常见问题

1. [React Intl] Missing locale data for locale: "zh-CN". Using default locale: "en" as fallback.

• 要引入所设locale的语言库import enLocaleData from 'react-intl/locale-data/zh'该文件为react-intl包自动下载——还有一个好处：在我们引入另一个自定义的映射时，依旧可以使用react-intl原有的数字/时间等数据的国际格式化；

  • 添加指定语言库addLocaleData(enLocaleData);

1. 设置&获取浏览器的locale

   • chrome：
     

   • js获取浏览器语言设置：

     let languages = navigator.languages;
     console.log("languages: ",languages);
     //=>languages: ["zh-CN","en"]

demo使用方法

• 安装有nodejs和webpack环境；

• 克隆或下载下来的文件夹进行npm init -y

• 安装依赖npm install

• 通过npm run start利用本地服务器查看

• 打开浏览器localhost:3000查看页面

使用效果预览

参考文档

1. Format.JS

2. github/yahoo/react-intl

3. NPM/react-intl

4. Internationalization in React

5. Segmentfault/webFunc

（编辑：李大同）

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