react-translation-next v1.0.1

react-translation-next

React 项目多语言翻译；翻译功能性组件，简单、灵活可控、污染小

特点

• 小、简单： 仅两个组件 I18nProvider、I18nTranslate； 一个类 I18n
• 无繁杂配置：仅三处配置，均为可选配置
• 尽可能地减少代码污染：若去掉该功能仅需删除所引用的组件即可，不会引起大范围的代码删减
• 翻译行为可控：
  • 默认被 I18nTranslate 组件包裹的子组件所有的文本内容都将被翻译，
  • 若不想被翻译在元素/组件上添加属性 data-translation={false} 或者 data-translation={{disabled: 1}} 即可阻止当前元素/组件下的文本内容或以下所有文本内容被翻译，
  • 再次设置 data-translation 将重置翻译行为

Demo
Live Demo

使用

npm i --save react-translation-next

import I18n, { I18nProvider, I18nTranslate } from 'react-translation-next'
...
const i18n = new I18n({
    debug: true,
    quitTranslationWarn: false,
    locale: '',
    defaultMessages: {},
    storeKey: 'locale',
    store: (key, locale)=>{}
})

class App extends React.PureComponent(){
    constructor(){
        this.state = {
            locale: i18n.getLocale()
        }
    }
    render(){
        return (
            <I18nProvider i18n={i18n} locale={this.state.locale}>
                {/*其他内容*/}
                <I18nTranslate>
                    {/*其他内容*/}
                    <div data-translation={false}>
                        {/*其他内容*/}
                    </div>
                </I18nTranslate>
                {/*其他内容*/}
            </I18nProvider>
        )
    }
}

介绍

1、 I18n 类

用法: const i18n = new I18n([options])

options:

• debug: 用于开发环境打印日志，生产环境不起作用
• quitTranslationWarn: 出现错误后的警告日志，true 不输出， false 输出，仅用于开发环境
• locale：: 默认语言, 默认查找 cookie => navigator.language
• defaultMessages: 默认翻译
• storeKey: 存储的选择的语言的key, 默认 locale
• store: 切换语言后存储语言的方法; 参数 1 key 即 storeKey, 参数 2 locale 即选择的语言，默认cookie 存储

2、I18nProvider 组件

用法：在入口处引入，并提供 实例化后的 i18n 和 locale 两个 props

注意：

• i18n 和 locale 两个 props 不提供也可以正常运行
• 若不提供 locale 将无法通过 state 或 redux 进行语言切换实时翻译；若提供了i18n prop 可以通过刷新(F5)的形式翻译
• 若不提供 i18n 将无法动态添加或修改翻译内容

3、I18nTranslate 组件

用法: 在需要翻译的地方添加该组件即可；建议在每个组件最上层添加即可（入口处须在 I18nProvider 之下）

4、data-translation 属性

用法: 在 html 元素和 React 组件上添加该属性

• data-translation = {true} 同不设置的效果一致
• data-translation = {false} 不翻译当前元素/组件下的文本内容，不包含下级元素/组件
• data-translation = {{disabled: <Boolean | Number> , before: <Functon>, after: <Functon>}}
  • disabled: 若为 true 同 data-translation = {false}；不设置或为 false 同data-translation = {true}；若为数字，将不翻译当前元素/组件以下所有子元素/组件的文本内容；除非子元素/组件添加 data-translation 属性
  • before: 翻译之前修改文本内容，必须返回, 支持 React Component
  • after: 翻译之后修改文本内容，必须返回, 支持 React Component

API

I18n 实例

i18n.getLocale() 获取当前的语言

i18n.setLocale(locale) 切换当前的语言

i18n.getLanguages() 获取所支持的语言

i18n.translate(locale, [message]) 动态添加翻译内容

• locale：String 示例 zh-CN, en
• locale：Object 示例 {'zh-CN': {}}, 此时 message 无效
• message：示例 {Login: '登录'}

注意：

1. 默认翻译的一段文本，可使用 html 标签或 React 标签将其隔断成单词进行翻译
2. 需要提供语言包
3. 在语言包中，添加 __name__ 属性，可作为当前语言的名称使用