gitHub

React-intl简要介绍

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

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

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

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

locale/zh_CN.js

/*在rect-intl语言中，只支持简单的json数据，通常为了可读性我们会写成如下格式，可使用falt转化*/
//flat:https://github.com/hughsk/flat
import flatten from 'flat';
const zh = {
    http: {
        server_error: '与服务器的连接出现问题，请稍后再试。',
        rate_limited: '访问次数过多，请稍后再试。'
    },
    button: {
        next: '下一步',
        finish: '完成'
    },
}

export default flatten(zh);

输出如下:
{
    'http.server_error':'与服务器的连接出现问题，请稍后再试。',
    'http.rate_limited':'访问次数过多，请稍后再试。',
    'button.next':'下一步',
    'button.finish':'完成'

}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// 从'react-intl'中引入addLocaleData,IntlProvider,FormattedMessage三个格式化组件；
import {addLocaleData,IntlProvider,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];

// 载入语言数据；
//载入一个addLocaleData(zh);
//载入多个；
addLocaleData([...zh,...en]);

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

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;


import React from 'react';
import { injectIntl, intlShape, FormattedMessage } from 'react-intl';

const ChildComponent = ({ intl }) => {
    //传入的{intl}名称不可更改；
    const getMessage = intl.messages;
    return(
        <section>
            {/*
                *通过intl.messages获取映射属性的方法；
                * 可以和任意内容（如：HTML标签）组合；
                * 如果你的key里有包含.，只能使用[]取值
                * */}

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

amandaXCY / javascript

react-intl 教程 #14

gitHub

React-intl简要介绍

locale/zh_CN.js

index.js

app.js