如何在你的ReactJS应用中使用i18next进行本地化

在这篇文章中，咱们要做的是国际化。咱们将使咱们的reactJS运用程序具有长时间的可扩展性，并研究怎么将其带入，无论它是你新创建的运用程序仍是你现已维护了一段时间的运用程序。

为什么是国际化？

这是一个规划和开发你的运用程序或产品的主意，你可认为不同的受众完成本地化，因为你的终端用户或许来自不同的文明，来自许多区域和文明。因而，重要的是要以这样的方法进行你的运用程序，假如你有必要引入本地化，它不会给你带来很多问题。

运用 react-i18next 进行本地化

在本指南中，咱们将运用**node包react-i18next。咱们将把咱们的i18next的装备**设置在 装备目录下：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
  // here we are going to detect users default browser language
  .use(LanguageDetector)
  // here we pass our i18n instance
  .use(initReactI18next)
  //initialization step
  .init({
    debug: true,
    // fallback language in case language is not detected
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
    resources: {
      en: {
        translation: {
          // here we will keep our translations for different languages
        },
      },
    },
  });

并调用它，这样它就能够和咱们的整个运用绑缚在一起。现在咱们能够经过以下方法进行翻译：

• 经过运用Trans组件包装器
• 经过运用useTranslation 挂钩。

现在我更喜欢运用Translation，因为它能够更洁净地注入到你的代码中，而且更容易阅览。让咱们看看它的操作。我将翻译我的文本输入中的占位符。我为完成这一方针所做的调整是

import { useTranslation } from "react-i18next";
import { StyledPlanetInput } from "./styled/PlanetInput.styled";
export default function PlanetInput({ newPlanetInput, handleAddPlanet }) {
  const { t } = useTranslation();
  return (
    <StyledPlanetInput>
      <input
        className="planet-input"
        ref={newPlanetInput}
        type="text"
        placeholder={t("createPlanet")}
      />
      <button className="planet-submit" onClick={handleAddPlanet}>
        +
      </button>
    </StyledPlanetInput>
  );
}

我运用了翻译钩子并调用了在装备中设置的言语资源。现在将言语添加到装备中。

resources: {
  en: {
    translation: {
      planet: "Planet",
      createPlanet: "Create a new planet",
      // here we will keep our translations for different languages
    },
  },
  de: {
    translation: {
      planet: "Planeten",
      createPlanet: "Erstellen Sie einen neuen Planeten",
    },
  },
},

我在我的运用程序中添加了德语作为我的第二言语选项，为了让用户能够在运用程序中挑选言语，咱们能够这样做

const languages = {
  en: { nativeName: "English" },
  de: { nativeName: "Deutsch" },
};
function YourComponent {
 return (
   // ... rest of your component
    // place where you want to place the buttons
    {Object.keys(languages).map((langauge) => (
      <button
        key={langauge}
        style={{
          fontWeight:
           i18next.resolvedLanguage === langauge ? "bold" : "normal",
        }}
        type="submit"
        onClick={() => i18next.changeLanguage(langauge)}
      >
        {languages[langauge].nativeName}
      </button>
    ))}
   // ... rest of your component
 )
}

你也能够运用**npm包i18next-browser-languagedetector**主动挑选用户的默许浏览器言语。

你的叔叔

BOOOOOOOMMM

总结

现在你能够添加任何你想要的言语，你的运用程序将完美地支持它。假如你不对你的字符串进行硬编码，这对你来说或许会更容易