多语言站点React前端框架i18next-编程学习网

在 react 中，其实已经有人封装了多语言的扩展库，我们只需要安装它就可以在我们的 react 项目中实现网站的多语言切换。

下面我们简单介绍下如何使用它。

首先，我们需要通过包管理工具比如 npm 等来安装它。

npm install i18next react-i18next@latest

然后，我们创建一个 i18n.js 配置文件，里面对多语言进行相关的配置。

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

i18n
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    // language resources
    resources: {
      en: {
        translation: {
         welcome: "Welcome to React"
        }
      },
      zh: {
        translation: {
         welcome: "欢迎使用 React"
        }
      },
    }
  });

export default i18n;

在这里面，resources 属性里面配置的就是对应的各个语言的翻译，这里面的数据，一般我们都是从数据库中获取，这里为了演示，我们直接写在了配置文件中。

接下来，我们介绍下如何在项目中使用它。

import { useTranslation } from "react-i18next";

const lngs = [
  { code: "en", native: "English" },
  { code: "zh", native: "Chinese" },
];

export default function App() {
  const { t, i18n } = useTranslation();

  const handleTrans = (code) => {
    i18n.changeLanguage(code);
  };

  return (
    <div style={{padding: '50px'}}>
      <h1>{t("welcome")}h1>

      {lngs.map((lng, i) => {
        const { code, native } = lng;
        return <button notallow={() => handleTrans(code)}>{native}button>;
      })}

    div>
  );
}

在这里，我们放置了两个按钮，一个是中文，一个是英文，点击中文，显示中文内容，点击英文，显示英文内容，这里我们主要就是通过调用i18n.changeLanguage这个函数来实现对应语言的转换，我们需要翻译的短语使t函数进行包裹。

对于用户语言的识别，我们主要可以通过下面的几种方式进行识别。

cookie
localStorage
navigator
querystring (append ?lng=LANGUAGE to URL)
htmlTag
path
subdomain

这些方式 i18next 都是支持的，不过使用的时候需要先安装。

npm install i18next-browser-languagedetector --save

使用方式如下：

import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import { reactI18nextModule } from "react-i18next";

import translationEN from '../public/locales/en/translation.json';
import translationDE from '../public/locales/de/translation.json';

// the translations
const resources = {
  en: {
    translation: translationEN
  },
  de: {
    translation: translationDE
  }
};

i18n
  .use(detector)
  .use(reactI18nextModule) // passes i18n down to react-i18next
  .init({
    resources,
    fallbackLng: "en", // use en if detected lng is not available

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

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

export default i18n;

i18next 此外还支持热更新，还支持 SSR，它还提供了Trans组件，可以让你方便的集成到项目中。

总之，i18next 是非常不错的多语言站点插件，更多的使用方法和介绍你可以参考官网。

文章详情

多语言站点React前端框架i18next

软考中级精品资料免费领

相关文章

猜你喜欢

多语言站点React前端框架i18next

盘点常用语言HTTP请求客户端的惊艳框架