react-18next使用

概述

项目之前没有考虑过国际化相关的事情，但是最近要搞出一个国际化的版本在国外的展会上面展示，于是加紧时间，两个人花了2天时间替换了所有的中文，替换的手都酸了

使用

参考文档：https://react.i18next.com/

例子：https://github.com/bkthrough/react-i18next-demo

1.国际化文件

json文件，每种翻译对应一个文件，内容可以带有变量，组件

例：

en-us.json:

{
  "common": {
    "cancel": "Cancel"
  },
  "join": "join",
  "retry": "Retry after {{timer}}s",
  "choosePerson": "Selected <0>{{num}}</0> person"
}

zh-cn.json:

{
  "common": {
    "cancel": "取消"
  },
  "join": "加入",
  "retry": "{{timer}}秒后重试",
  "choosePerson": "选择人数<0>{{num}}</0>, 没选择人数<1>{{num1}}</1>"
}

变量需要通过{{}}格式包裹，组件需要通过<数字></数字>格式包裹，数字的用处在下面Trans组件中体现。

需要注意的是，组件不能当做变量赋值

2.初始化配置

import i18n from "i18next";
import enUsTrans from "./en-us.json";
import zhCnTrans from "./zh-cn.json";

i18n.init({
  //引入资源文件
  resources: {
      en: {
        translation: enUsTrans,
      },
      zh: {
        translation: zhCnTrans,
      },
    },
  //选择默认语言，选择内容为上述配置中的key，即en/zh
  fallbackLng: "en",
})

3.内容

t函数：应用于内容只有字符串，或带有变量

例:

import i18n from "i18next";
import React, { Component } from "react";

class App extends Component{
    render(){
        return <h1>{i18n.t("common.cancel")}
          <div>{i18n.t("retry", {retry: 3})}</div>
        </h1>
        );
    }
}

Trans组件：应用于内容包含组件，Trans的参数i18nKey为json中定义的key值；values设置变量内容；components设置组件内容，component是一个数组，数组的下标即为定义内容的下标，比如下述div对应0，span对应1

例:

import i18n from "i18next";
import React, { Component } from "react";

class App extends Component{
    render(){
        return <Trans i18nKey={"choosePerson"} values={{num: 3, num1: 4}} components={[<div>content</div>, <span>content</span>]}></Trans>
        );
    }
}

注

在electron上面使用需要注意多进程的问题，每个进程设置的都是本进程的i18n，所以如果中途要修改语言类型，则需要在主进程和每个渲染进程中都修改语言类型才可以生效