使用 i18next 实现 React 应用国际化

如今，我们的应用程序规模已达到前所未有的高度，而网络则赋予了我们在全球范围内访问这些应用程序的可能性。然而，许多开发者却面临着一个问题……

如何快速有效地翻译我的应用程序？

令我们高兴的是，像 React 这样的库有非常简单的替代方案来实现此功能，今天，我们将介绍其中之一，即 i18next 插件。

实施国际化

首先，让我们进入我们的工具。如果你想从头开始创建一个应用程序，请使用以下命令创建一个新的 React 应用程序：

yarn create react-app i18napp --template typescript

如果您已经有一个项目或刚刚创建了您的项目，请安装 i18next 正常工作所需的依赖项：

yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

好了，现在我们已经准备好了所需的软件包。让我们开始编写代码吧！

配置 i18next

为了向我们的应用程序表明国际化的使用并正确激活其中的钩子，我们必须准备一个位于index.js旁边的文件，它被称为i18n.js并包含以下几行：

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
  // Enables the i18next backend
  .use(Backend)
  // Enable automatic language detection
  .use(LanguageDetector)
  // Enables the hook initialization module
  .use (initReactI18next)
  .init({
    // Standard language used
    fallbackLng: 'en',
    debug: true,
    //Detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    }
  })

export default i18n;

之后，我们应该将其导入到我们的index.js中，它看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './i18n';

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

一切就绪，React i18next 已启用并可供使用。下一步是整合我们的翻译。

融入当地环境

网页上的国际化基于 JSON 格式，并带有分词功能。在此应用中，我们将整合英语和葡萄牙语。

为此，我们将在/public文件夹中添加 /locales 文件夹，该文件夹包含两个子文件夹 /en 和 /pt，每个子文件夹都包含一个 translation.json 文件，该文件包含带有翻译的对象。请查看英文文件的示例以及生成的文件夹结构：

{
  "title": "Welcome to an internationalized APP",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Switch language between english and portuguese using buttons above."
  }
}

区域过滤器结构

完成后，让我们开始处理我们的主页。

自定义 App.js

现在让我们进入最后一部分，构建我们的主页。为此，我们将删除 App.js 的原始内容，只留下一个div。

导入翻译钩子

要导入 i18next 钩子，我们使用以下代码：

import {useTranslation} from "react-i18next";

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

t 属性用于结合我们的翻译和 i18n 来观察本地化状态的变化。

在标签中使用翻译

要使用对象的属性，我们只需调用上面解构的 t() 函数：

   <div><h1>{t("title")}</h1></div>

看看这有多简单？

我们将使用下面的代码完成我们的应用程序，通过添加两个按钮来改变语言并实时看到魔术......

import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

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

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="App">
      <button onClick={() => changeLanguage("en")}>EN</button>
      <button onClick={() => changeLanguage("pt")}>PT</button>
      <hr />
      <div><h1>{t("title")}</h1></div>
      <div>{t("description.part1")}</div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

export default App;

观察魔法

如果您正确输入了代码，您的应用就会发生以下神奇的事情。翻译是在运行时完成的。

你喜欢吗？代码可以在我的GitHub上找到。

感谢阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/aryclenio/internationalizing-your-react-app-with-i18next-43op