i18n框架（一）——基础应用及t函数

i18n框架（一）——基础应用及t函数

i18next是支持react框架的一个国际化翻译框架，i18n是internationalization的简写，18的意思是i和n之间有18个字母。这个组件可以自定义翻译内容，如果网站涉及多国家使用的话，这个框架将会是必需的。

使用i18next需要先用npm下载：

npm install i18next

并导入i18n

import i18n from "i18next"

基本用法：

首先需要写一个原文和译文对应的对象，对象支持多语言翻译，可以设置多组翻译的原文和译文，对象写法如下：

const resources = {
  en: {
    translation: {
      "welcome": "welcome to react"
    }
  },
  zhCN: {
    translation: {
      "welcome":"欢迎来到react"
    }
  }
};

其中，resources，en，zhCN可以随意命名，translation不能随意命名。

创建好原文——译文对象后，需要初始化i18n，初始化要用到i18n.init函数，传入上一步定义的resources，以及告诉i18n用哪组语言，写法如下：

    i18n.init({
      resources,
      lng: "zhCN"
    });

上边例子表明用zhCN这组翻译，做完这些后在react组件里边就可以用t函数调用翻译，用法示例：

function App() {
  return (
    <div>
      <h2>{i18n.t('welcome')}</h2>
    </div>
  );
}

在h2标签里的输出将会是：  欢迎来到react