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

前言

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

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

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

React 支持多语言翻译国际化 -- i18next_第1张图片

官方文档

https://react.i18next.com/

入门步骤

  1. 依赖安装
npm install i18next react-i18next
  1. 初始化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",
      },
    },
    zh: {
      translation: {
        title: "标题",
        description: "我的名字叫{{name}}",
        website: "<0>我的网站地址是<1>乐闻世界",
      },
    },
  };

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")
 );
  1. 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>
    );
    }
    
  1. 切换当前语言 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>
    );
    } 
    

你可能感兴趣的:(#,React,进阶之路,#,JavaScript,react.js,前端,javascript,i18next)