说疯狂的开发者！

今天我将向您展示，将整个项目翻译成 react 从未像现在这样容易。但首先您需要知道为什么这很重要。

当人们开始编程时，代码文本和消息通常使用葡萄牙语（pt-br）。将项目翻译成其他语言从来都不是优先事项，并且被认为是复杂或不必要的。

那么为什么它会相关呢？

这取决于你的实际情况。以下是您应该考虑此过程的一些原因：

公司需要
可能是您工作的公司或您拥有的某些 saas 开始在另一个国家/地区运营并且有此需求。具有此功能的产品有巨大的差异。

申请国​​际职位空缺
如果您正在申请国际职位空缺，拥有包含国际化项目的作品集可以给您带来引人注目的亮点。这表明您已准备好从事全球项目，并且不像大多数人一样懒惰。

你永远不会学太多
国际化不仅是一种特征，也是一种重要的学习经历。这是您的技能和工具库中的另一种武器。

过去是如何做到的？

项目翻译已经是个老问题了。人们在 html 中选择了该国家的国旗，供人们选择，并在代码中用 if 填充以了解将显示哪些文本。
这是非常被忽视的。网站是用单一语言制作的，翻译是随意添加的。如果是在后端，交易会更糟糕。

随着互联网的全球化，对多语言软件的需求不断增长，带来了针对国际化的特定工具。像 gnu gettext 这样的解决方案出现在后端，随后出现了像 i18next 和 react-intl 这样的前端库。然后疑问就来了…

i18next 对比react-intl：选择哪一个？

i18next：这个出现于 2011 年，它是一个 npm 包，适用于客户端的 node.js 和 spa。社区采纳了它，并最终于2015年在react-i18next lib中制作了react版本。因此，作为积极和消极的点，我们有：

优点：灵活性、路上时间（自 2011 年起）、庞大的生态系统（一次学习，随处翻译）和自动回退。缺点：学习曲线。有很多文档需要阅读，但并不是您需要的所有内容都在那里。

react-intl：formatjs 项目的一部分，遵循国际 javascript api 标准，确保与现代浏览器的兼容性。

优点：与 ecmascript 标准保持一致，集成简单。缺点：灵活性较差，插件支持较少。

我们将使用哪一个？

i18下一个我的朋友们！我总是建议阅读文档来开始，但让我们看看 doido 的指南！

使用 i18next 国际化 react 应用程序

安装：

   npm install i18next i18next-chained-backend i18next-http-backend i18next-resources-to-backend react-i18next next-i18next 

登录后复制配置：创建一个i18n.js来配置i18next。

   import i18n from 'i18next';   import { initreacti18next } from 'react-i18next';   import backend from 'i18next-http-backend';   import languagedetector from 'i18next-browser-languagedetector';   i18n     .use(backend)     .use(languagedetector)     .use(initreacti18next)     .init({ fallbacklng: 'en', interpolation: { escapevalue: false } });   export default i18n;

登录后复制translations：在 locales/en/translation.json 和 locales/pt/translation.json 中创建翻译文件。

   {     "welcome": "welcome to our application!",     "login": "login"   }

登录后复制翻译的使用：在 react 中使用 usetranslation 钩子。

   import react from 'react';   import { usetranslation } from 'react-i18next';   function app() {     const { t } = usetranslation();     return (       
         
{t('welcome')}
         {t('login')}       
     );   }   export default app;

登录后复制语言更改：允许用户更改语言。

   import react from 'react';   import { usetranslation } from 'react-i18next';   function languageswitcher() {     const { i18n } = usetranslation();     const changelanguage = (lng) => i18n.changelanguage(lng);     return (       
          changelanguage('en')}>english          changelanguage('pt')}>português       
     );   }   export default languageswitcher;

登录后复制

这就是全部吗？

当然不是，我现在向您展示我在 crazystack 项目中做了什么。首先，我在 nextjs 中做了一个不同的配置，采用了我在项目本身的公共文件夹中定义的静态 json！看看：

import i18next from "i18next";import chainedbackend from "i18next-chained-backend";import httpbackend from "i18next-http-backend";import resourcestobackend from "i18next-resources-to-backend";import { initreacti18next } from "react-i18next";import { defaulttexts } from "./defaulttexts";i18next  .use(chainedbackend)  .use(initreacti18next)  .init({    lng: "pt-br",    fallbacklng: "pt-br",    interpolation: {      escapevalue: false,    },    compatibilityjson: "v3",    react: {      //wait: true,//usar no react native      usesuspense: false,    },    backend: {      backends: [httpbackend, resourcestobackend(defaulttexts)],      backendoptions: [        {          loadpath: `${process.env.next_public_url}/{{lng}}/{{ns}}.json`,        },      ],    },  });

登录后复制

然后我创建了一个上下文 api 来保存语言并在整个项目中访问它。从进口开始

2. 进口

import { usetranslation } from "react-i18next";import { createcontext, usestate, usecontext } from "react";

登录后复制usetranslation：react-i18next 挂钩来访问翻译功能。在这里，您将在项目中几乎每个 jsx 组件中使用它。createcontext、usestate、usecontext：用于创建和使用上下文以及管理状态的 react 函数。

3. 上下文创建

const i18ncontext = createcontext({} as any);

登录后复制

创建上下文来通过 dom 存储和提供数据（例如当前语言）。

4. 环境检查

export const isbrowser = typeof window !== "undefined";

登录后复制

此行检查代码是否在浏览器中运行（而不是在服务器上），这对于处理 localstorage 等特定于客户端的功能至关重要。

5.i18nprovider组件

export const i18nprovider = ({ children }: any) => {  const { i18n } = usetranslation() || {};  const [currentlanguage, setcurrentlanguage] = usestate(    formatlanguagefromi18n(i18n?.language)  );  const changelanguage = (language) => {    setcurrentlanguage(language);    i18n?.changelanguage?.(formatlanguagefromselect(language));    localstorage.setitem("language", formatlanguagefromselect(language));  };  return (          {children}      );};

登录后复制

这个组件是一个provider，它包装了react组件树并提供了语言的当前状态以及更改它的函数。

usetranslation：从react-i18next库中检索i18n对象，其中包含有关当前语言的信息。currentlanguage：存储当前语言的state，根据i18n检测到的语言进行初始化。changelanguage：更改语言的函数，这也会将选择保存在 localstorage 中，以便在页面重新加载之间保持持久性。

6. 挂钩使用i18n

export const usei18n = () => {  if (!isbrowser) {    return {      currentlanguage: "pt-br",      setcurrentlanguage: () => {},      changelanguage: () => {},    };  }  return usecontext(i18ncontext);};

登录后复制

这个钩子可以轻松访问任何组件中的国际化上下文。

检查您是否在浏览器中（isbrowser）。如果没有，则返回默认值，以避免服务器端出错。如果在浏览器中，则消耗并返回 i18ncontext 上下文。

7. 转换图

const countrytolanguage = {  br: "pt-br",  us: "en",};const languagetocountry = {  "pt-br": "br",  en: "us",};

登录后复制

这些对象将国家/地区代码映射到语言代码，反之亦然，从而可以轻松地在不同约定之间格式化语言代码。

8. 格式化函数

export const formatlanguagefromi18n = (language) => languagetocountry[language];export const formatlanguagefromselect = (language) => countrytolanguage[language];

登录后复制

这些函数根据需要格式化语言环境。 formatlanguagefromi18n 将语言代码转换为国家/地区代码，而 formatlanguagefromselect 则进行反向转换。

完整代码

"use client";import { usetranslation } from "react-i18next";import { createcontext, usestate, usecontext } from "react";const i18ncontext = createcontext({} as any);export const isbrowser = typeof window !== "undefined";export const i18nprovider = ({ children }: any) => {  const { i18n } = usetranslation() || {};  const [currentlanguage, setcurrentlanguage] = usestate(    formatlanguagefromi18n(i18n?.language)  );  const changelanguage = (language) => {    setcurrentlanguage(language);    i18n?.changelanguage?.(formatlanguagefromselect(language));    localstorage.setitem("language", formatlanguagefromselect(language));  };  return (          {children}      );};export const usei18n = () => {  if (!isbrowser) {    return {      currentlanguage: "pt-br",      setcurrentlanguage: () => {},      changelanguage: () => {},    };  }  return usecontext(i18ncontext);};const countrytolanguage = {  br: "pt-br",  us: "en",};const languagetocountry = {  "pt-br": "br",  en: "us",};export const formatlanguagefromi18n = (language) => languagetocountry[language];export const formatlanguagefromselect = (language) => countrytolanguage[language];

登录后复制

然后我改变了导航栏

在代码中，我使用国家/地区下拉菜单选择语言。看看：

"use client";//@ts-nocheckimport { header, flex, logo, profile, notificationsnav, searchbar } from "@/shared/ui";import { usebreakpointvalue, icon, iconbutton, usemediaquery } from "@chakra-ui/react";import { rimenuline } from "react-icons/ri";import { useauth, usesidebardrawer } from "@/shared/libs";import { useeffect, usestate } from "react";import { countrydropdown } from "react-country-region-selector";import { theme } from "@/application/theme";import { formatlanguagefromi18n, usei18n } from "@/application/providers/i18nprovider";import { usetranslation } from "react-i18next";export const navbar = ({ showlogo = true }) => {  const { isauthenticated } = useauth() || {};  const { i18n } = usetranslation();  const { changelanguage, setcurrentlanguage } = usei18n() || {};  const { onopen = () => {}, onclose } = usesidebardrawer() || {};  const isdesktopversion = usebreakpointvalue({ base: false, lg: true });  const [country, setcountry] = usestate(formatlanguagefromi18n(i18n?.language));  useeffect(() => {    return () => {      onclose?.();    };  }, []);  const dropdown = countrydropdown as any;  useeffect(() => {    const language = localstorage.getitem("language");    if (language) {      setcountry(formatlanguagefromi18n(language));      setcurrentlanguage(language);      i18n?.changelanguage?.(language);    }  }, []);  return (    
              {isauthenticated && !isdesktopversion && (          <iconbutton            aria-label="open sidebar"            fontsize="24"            icon={}            variant="unstyled"            onclick={onopen}            mr="1"            mt={2}          />        )}                {/* {islargerthan560 && (                  )} */}        {isauthenticated && (                      {/*  */}             {                setcountry(val);                changelanguage(val);              }}              labeltype="short"              valuetype="short"              showdefaultoption              defaultoptionlabel="selecione o idioma"              whitelist={["us", "br"]}              style={{                backgroundcolor: theme.colors.secondary[400],                padding: 10,                width: 60,                marginright: 15,                borderradius: 8,              }}            />                              )}          
  );};

登录后复制

导入和初始设置:

useauth：检查用户是否经过身份验证。usebreakpointvalue：根据屏幕大小决定是否显示桌面版本。usestate：设置国家/语言（国家）的初始状态，使用formatlanguagefromi18n函数格式化i18n的当前语言useeffect：第一个效果是在卸载组件时清除侧边栏（onclose）。第二个效果检查语言是否保存在 localstorage 中，如果是，则更新国家/地区状态并更改应用程序中的语言。

语言下拉菜单:

下拉列表是使用react-country-region-selector库的countrydropdown组件实现的，该组件被定制为用作语言选择器。value={country}：下拉列表中选择的值由国家/地区控制。onchange={(val) => { … }}：当下拉值改变时，更新国家状态，并调用changelanguage函数更改应用程序语言。whitelist={[“us”, “br”]}：将下拉选项限制为“us”（英语）和“br”（葡萄牙语）。style={…}：下拉菜单的自定义内联样式，使用主题的颜色和间距。语言选择器行为：下拉列表允许用户选择首选语言，并且此选择会保留在 localstorage 中。更改语言时，下拉列表会反映此更改，并且应用程序会更新为使用新选择的语言。要在文章中包含您在图像中提供的代码片段，您可以遵循以下格式：

以及如何更改文本？

从一个组件到另一个组件，我都遵循相同的过程。下面的代码展示了如何根据本地化密钥用动态翻译替换静态文本：

import { Divider } from "@chakra-ui/react";import { IoExitOutline } from "react-icons/io5";import { useRouter } from "next/navigation";import { useTranslation } from "react-i18next";  // Importando o hook useTranslationtype ProfileProps = {  showProfileData?: boolean;};export const Profile = ({ showProfileData }: ProfileProps) => {  const { t } = useTranslation(["PAGES"]);  // Obtendo a função t para tradução  const { user, logout } = useAuth() || {};  const router = useRouter();  const { showUserMenu, setShowUserMenu } = useProfile();  return (          {/* Outras partes do componente */}                                {t("PAGES:HOME_PAGE.logout", { defaultValue: "Sair" })}  // Chave de tradução com valor padrão                    );};

登录后复制

在此示例中，usetranslation 挂钩用于加载 pages:home_page.logout 翻译键。如果未找到该密钥，将显示默认文本“退出”。

结论

这个想法可以应用于任何静态文本组件。只需使用 usetranslation 钩子即可。
国际化您的应用程序可以打开全球市场的大门，突出您的投资组合并提高您的技能。在 i18next 和 react-intl 之间进行选择取决于您项目的具体需求，但对于那些想要入门的人来说，两者都是很好的选择。

课程建议

2022 年，我创建了crazystack 训练营。在其中，我展示了在线服务调度系统的 2 个完整应用程序，应用了设计模式、简洁架构、功能切片设计、solid、ddd 以及单元、集成和 e2e 测试等先进概念。

在第一个应用程序中，您将学习如何在 node.js 生态系统中构建 rest api。将创建涉及复杂业务规则的用例，例如列出可用时间、根据预订生成订单、忠诚度系统、佣金、付款、客户评论等等。一切都在 typescript 中完成并使用非关系数据库 mongodb。

在第二个应用程序中，您将学习如何在 react.js 生态系统中构建管理面板来查看图表和操作记录。一切都是通过 typescript 和 next.js 框架完成的。此外，还将使用chakra ui可视化组件库，将原子设计概念应用于创建的组件。要了解更多信息，请访问crazystack.com.br。

以上就是使用 i 翻译你的 React 项目从未如此简单的详细内容，更多请关注【创想鸟】其它相关文章！