React 支持多语言翻译国际化 -- i18next

前言

如果我们的项目需要更多的流量，支持其他国家的语言是必不可少的。对于React项目我们该如何实现项目多语言，让工程走向国际化，本文将介绍目前最通用的解决方案 i18next。

准确是说 i18n并不仅仅是为 React 而生，为了支持React项目，我们还需要引入 react-i18n ext插件。

本文将通过简单的例子解释i18next的核心功能，下图是最终效果。

官方文档

https://react.i18next.com/

入门步骤

1. 依赖安装

npm install i18next react-i18next

2. 初始化i18n

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {
    en: {
      translation: {
        title: "Title",
        description: "My name is {{name}}, and ",
        website: "<0>My website is <1>levenx`s world</1></0>",
      },
    },
    zh: {
      translation: {
        title: "标题",
        description: "我的名字叫{{name}}",
        website: "<0>我的网站地址是<1>乐闻世界</1></0>",
      },
    },
  };

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: "zh",
    lng:'zh',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
  });

ReactDOM.render(
 <React.StrictMode>
 <BrowserRouter> <Suspense fallback={<div />}>{renderRoutes(routes)}</Suspense> </BrowserRouter>
 </React.StrictMode>,
 document.getElementById("root")
 );

3. i18n文案翻译

如果我们需要文案随着语言版本进行变化，i18next提供了几种方式

• Hooks useTranslation

  import { useTranslation, Trans } from "react-i18next";
  
  export default function TransPage() {
  const { t, i18n } = useTranslation();
  
  return (
  <div className="layout">
    <div>{t("title")}</div>
    {i18n.t("description", { name: "乐闻" })}
  </div>
  );
  

• HOC withTranslation

  如果你使用的是class组件，那么你不能用hooks, 你可以考虑使用高阶组件

  import React from 'react';
  import { withTranslation } from 'react-i18next';
  
  function MyComponent({ t, i18n }) {
  return <p>{t('my translated text')}</p>
  }
  
  export default withTranslation()(MyComponent);
  

• 或者你可以用render props方式，它对组件类型没有限制

  import React from 'react';
  import { Translation } from 'react-i18next';
  
  export function MyComponent() {
  return (
    <Translation>
      {
        (t, { i18n }) => <p>{t('my translated text')}</p>
      }
    </Translation>
  )
  }
  

• 如果你的文案里包含一些DOM元素，比如包含一个Link元素，而不是一串单纯的文字，那么你需要使用Trans Component

  import { useState } from "react";
  import { useTranslation, Trans } from "react-i18next";
  import "./index.less";
  
  export default function TransPage() {
  const { t, i18n } = useTranslation();
  
  return (
    <div className="layout">
      <Trans i18nKey="website">
        <div style={{ fontSize: 20, fontWeight: 800 }}>
          Welcome to React<a href="https://www.levenx.com">Link</a>
        </div>
      </Trans>
    </div>
  );
  }
  

4. 切换当前语言 i18n.changeLanguage

   import React, { useState } from "react";
   import { useTranslation, Trans } from "react-i18next";
   import "./index.less";
   
   export default function Head() {
   const [lang, setLang] = useState("en");
   
   const { t, i18n } = useTranslation();
   
   const onLanguageSwitch = () => {
   	const target = lang === "en" ? "zh" : "en";
   	i18n.changeLanguage(target);
   	setLang(target);
   };
   
   return (
   	<header className="head">
     	<div className="head-left">
       	<div className="head-left__logo">乐闻世界</div>
    	 </div>
     	<div className="head-right">
       	<div className="head-right-language" onClick={onLanguageSwitch}>
         	当前语言：{lang}
       	</div>
     	</div>
   	</header>
   );
   }