react-i18next的使用

Posted 2022-09-21 飞翔的熊blabla

有什么问题可以加微信问吧 cannywill ，尽量帮助， 一起进步

公司项目使用react做的，现在需要添加多语言，于是上网上搜到了react-i18next库，看了一些关于这个库的使用方法的文章，然而始终没有弄明白，于是决定仔细阅读文档，最终弄明白了使用方法，在这里记载一下。
首先看官方文档的 快速开始，按照文档一步一步走，首先安装包。

npm install react-i18next i18next --save
// 或者
yarn add react-i18next i18next

定义语言文件,类似于这样的文件

// common.js
// 公用的文本
export default 
 loading: '正在加载...',
  服务器连接异常: '服务器连接异常',
  请输入手机号: '请输入手机号',
  手机号格式不正确: '手机号格式不正确',
  notParse: '手机号码错误，无法解析该手机号',
  请先进行验证: '请先进行验证',
  请输入密码: '请输入密码',
  两次密码输入不一致: '两次密码输入不一致',
  请输入短信验证码: '请输入短信验证码',
  请输入新密码: '请输入新密码',
  passwordFormatError: '请输入6-16位密码',
  请再次输入密码: '请再次输入密码',
;

然后在你的react项目中的index.js文件同一级下创建一个 i18n.js

//i18n.js
import i18n from 'i18next';
import  initReactI18next  from 'react-i18next';
import  getLanguage  from './common/utils';
import zh_CNCommon from './locales/zh_CN/common';
import zh_CNMenu from './locales/zh_CN/menu';
import zh_CNProfile from './locales/zh_CN/profile';

import zh_TWCommon from './locales/zh_TW/common';
import zh_TWMenu from './locales/zh_TW/menu';
import zh_TWProfile from './locales/zh_TW/profile';

const resources = 
  zh_CN: 
    common: // 这是namespace的名称
      ...zh_CNCommon, // 公共部分
      ...zh_CNProfile, // 注册登录
    ,
    menu: // 这是namespace的名称
      ...zh_CNMenu, // 左侧菜单
    ,
  ,
  zh_TW: 
    common: // 这是namespace的名称
      ...zh_TWCommon, // 公共部分
      ...zh_TWProfile, // 注册登录
    ,
    menu: // 这是namespace的名称
       ...zh_TWMenu, // 左侧菜单
    ,
  ,
;

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init(
    resources,
    lng: getLanguage(),

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: 
      escapeValue: false, // react already safes from xss
    ,
  );

export default i18n;

然后我们在我们的index.js中导入i18n.js

import React,  Component  from "react";
import ReactDOM from "react-dom";
import './i18n'; // 在这里导入 i18n.js
import App from './App';

// append app to dom
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

这样react-i18next就在项目中配置完成了，当然i18n.js文件中还有一些其他的参数可以配置，这里由于项目紧急我没有做过多的研究，有兴趣的同学可以深入研究一下，接下来我们看如何在页面中去使用。
我们在我们的页面中使用方式有4种：

• 第1种是使用hook函数
  这种方法只能适用于函数式组件，由于本人项目中都是用的类组件，这里放一个官网的例子。

import React from 'react';

// the hook
import  useTranslation  from 'react-i18next';

function MyComponent () 
  const  t, i18n  = useTranslation();
  return <h1>t('Welcome to React')</h1>

• 第2种是使用高阶组件（HOC）
  这应该是最常用的方法，我在项目中也都是使用的这种方法，react-i18next 内部封装了一个高阶组件withTranslation,我们需要利用这个高阶组件把我们自己的组件包装一次

import  withTranslation  from 'react-i18next';
// ...省略若干行
@withTranslation()
class Reset extends React.Component 
// ...省略若干行

这样包装之后我们就能在this.props上拿到一个t函数和一个i18n对象，我们在需要进行多语言处理的地方用t函数进行翻译,t函数的参数是我们语言文件的key，这里的key可以是中文。

<Modal
    visible=visible
    title=t('请验证')
    footer=null
  >
    <div className=loading ? '' : style.hide>t('loading')</div>
  </Modal>

有时候我们可能需要加载不同的命名空间下的语言文件，我们使用高阶组件withTranslation包装组件的时候就需要加载我们需要用到的命名空间

@withTranslation(['common', 'pageA']) // 加载common和pageA语言文件

使用的时候我们

<Modal
    visible=visible
    title=t(请验证')
    footer=null
  >
    <div>t('pageA':页面A')</div>
  </Modal>

如果t函数指定命名空间就使用指定命名空间下的语言，如果没有指定使用第一个命名空间的语言，这里是common。

• 第3种是使用Translation

import  Translation  from 'react-i18next';
export default function MyComponent () 
  return (
    <Translation>
      
        t => <h1>t('Welcome to React')</h1>
      
    </Translation>
  )

• 第4种是使用Trans组件

import  Trans  from 'react-i18next';

export default function MyComponent () 
  return <Trans><H1>Welcome to React</H1></Trans>

展开阅读全文