React集成i18n：翻译文件使用教程

一分耕耘，一分收获！既然都打开这篇《React集成i18n：翻译数据文件使用指南》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

引言

在构建多语言Web应用时，国际化（i18n）是不可或缺的一环。react-i18next是一个功能强大且灵活的库，用于在React应用中实现国际化。通常，我们会在React组件中使用useTranslation Hook来获取翻译函数t，并直接在JSX中调用它。然而，当应用程序的导航菜单或类似配置数据存储在独立的JavaScript文件中时，如何将这些静态数据中的标题进行国际化，成为了一个常见挑战。直接在非React组件的纯JavaScript数据文件中使用useTranslation是不可行的，因为它是一个Hook，必须在函数组件内部调用。

本教程将提供一种优雅的解决方案，使你能够在不改变数据文件结构本质的情况下，实现导航标题的动态翻译。

解决方案概述

核心思想是将数据文件中的具体显示文本替换为抽象的“翻译键”（Translation Key）。这些键将作为在翻译资源文件中查找对应文本的标识符。当组件渲染这些数据时，它会使用useTranslation Hook提供的t函数，根据当前语言环境和翻译键动态获取并显示正确的翻译文本。

具体步骤如下：

1. 修改数据文件 (NavbarData.js)：将导航项的title属性值从实际文本改为唯一的翻译键。
2. 修改组件文件 (Navbar.js)：在渲染导航项时，使用t()函数包裹item.title，以实现动态翻译。
3. 配置翻译资源文件 (en.json, fr.json)：创建或更新JSON文件，将翻译键映射到各种语言的实际文本。

详细步骤

1. 更新数据文件 (NavbarData.js)

首先，我们需要修改存储导航数据的NavbarData.js文件。请注意，这个文件是一个纯JavaScript数组，不应导入或使用React Hook（如useTranslation）。我们将title属性的值替换为简短、描述性的翻译键。

更新前的 NavbarData.js 示例：

import React from 'react';
import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import fraud from './Icons/fraud.svg';
// import { useTranslation } from 'react-i18next'; // 此行应移除

export const NavbarData = [
    {
        title: 'Operational Overview', // 实际文本
        path: '/monitoringoverview',
        icon: <img src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Performance Quality", // 实际文本
        path: "/performancequality",
        icon: <img src={performance} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "Fraud and Anomalies", // 实际文本
        path: "/fraud",
        icon: <img src={fraud} alt="" />,
        cName: 'nav-text'
    },
];

更新后的 NavbarData.js 示例：

import React from 'react';
import startpageIcon from './Icons/startpage.svg';
import performance from './Icons/performance.svg';
import fraud from './Icons/fraud.svg';

export const NavbarData = [
    {
        title: 'operationalOverview', // 翻译键
        path: '/monitoringoverview',
        icon: <img src={startpageIcon} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "performanceQuality", // 翻译键
        path: "/performancequality",
        icon: <img src={performance} alt="" />,
        cName: 'nav-text'
    },
    {
        title: "fraudAndAnomalies", // 翻译键
        path: "/fraud",
        icon: <img src={fraud} alt="" />,
        cName: 'nav-text'
    },
];

说明： 我们移除了useTranslation的导入，并将title的值从可读的字符串更改为小驼峰命名的翻译键。这些键将作为在翻译文件中查找对应文本的标识符。

2. 修改组件文件 (Navbar.js)

接下来，在Navbar.js组件中，当遍历NavbarData并渲染每个导航项时，我们将使用useTranslation Hook提供的t函数来翻译item.title。

关键修改点：

• 确保在Navbar函数组件内部调用useTranslation()。
• 在渲染item.title的地方，使用t(item.title)进行包裹。
• 推荐实践： 使用keyPrefix选项来简化翻译键的路径。

更新后的 Navbar.js 相关部分示例：

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData"; // 导入更新后的数据
import { IconContext } from "react-icons";
import "./Navbar.css";
// ...其他导入

import { useTranslation } from 'react-i18next'; // 确保已导入

//Navbar function
function Navbar() {
  // ...其他useState和useEffect

  // i18n
  // 使用 keyPrefix 简化翻译键，所有在此 t 函数中调用的键都会自动加上 "navbar.titles" 前缀
  const { t, i18n } = useTranslation("default", { keyPrefix: "navbar.titles" }); 
  const lngs = {
    en: {nativeName: 'English'},
    fr: {nativeName: 'French'}
  };

  // ...getPageTitleByUrl, userConfigPageTitle, useEffect, handleLanguageChange

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        {/* ...navbar header */}

        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
                    <span className="navbutton-text">
                      <span className="navbutton-icon">{item.icon}</span>
                      {t(item.title)} {/* 在这里应用 t() 函数 */}
                    </span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

说明： 通过在useTranslation中设置keyPrefix: "navbar.titles"，我们告诉react-i18next，所有通过此t函数进行的翻译查找都应以navbar.titles作为前缀。这意味着，当t(item.title)被调用时，如果item.title是operationalOverview，实际查找的键将是navbar.titles.operationalOverview。这有助于保持翻译文件结构的清晰和组织性。

3. 配置翻译资源文件 (en.json, fr.json)

最后，我们需要在你的翻译资源文件（例如public/locales/en/default.json和public/locales/fr/default.json，具体路径取决于你的i18n.init()配置）中定义这些翻译键及其对应的文本。

en.json (或 default.json for English) 示例：

{
  "navbar": {
    "titles": {
       "operationalOverview": "Operational Overview",
       "performanceQuality": "Performance Quality",
       "fraudAndAnomalies": "Fraud and Anomalies"
    },
    "criminalRecords": "Criminal Records",
    "logout": "Logout"
  }
}

fr.json (或 default.json for French) 示例：

{
  "navbar": {
    "titles": {
       "operationalOverview": "Aperçu Opérationnel",
       "performanceQuality": "Qualité des Performances",
       "fraudAndAnomalies": "Fraudes et Anomalies"
    },
    "criminalRecords": "Casier Judiciaire",
    "logout": "Déconnexion"
  }
}

说明：

• JSON结构与keyPrefix设置相匹配。navbar.titles是一个嵌套对象，其中包含了所有导航标题的翻译键值对。
• 确保每种语言的JSON文件都包含相同的键结构，即使某些翻译暂时缺失，也应保留键以避免运行时错误。

重要注意事项

1. i18n.init() 配置：本教程假设你已经在应用程序的入口文件（如index.js或App.js）中正确配置了i18n.init()，并加载了翻译资源文件。这是react-i18next正常工作的基础。
2. 数据文件与Hook：再次强调，NavbarData.js是一个纯数据文件，不应导入或使用任何React Hook。useTranslation Hook只能在React函数组件内部使用。
3. 翻译键的命名：建议使用小驼峰（camelCase）或蛇形（snake_case）命名翻译键，并保持一致性，以提高可读性和维护性。
4. 动态标题翻译：对于Navbar.js中其他需要翻译的动态标题，例如pageTitle，你同样需要将其值设为翻译键，并在渲染时使用t(pageName)。例如，如果pageName可能被设置为"User Information"，你需要将其改为"userInformation"，并在翻译文件中定义"userInformation": "User Information"。
5. 灵活性：这种方法不仅适用于导航数据，还可以应用于任何存储在外部JavaScript文件中的配置数据，例如表单字段标签、表格列名等，只要这些数据最终在React组件中被渲染。

总结

通过将外部数据文件中的实际文本替换为翻译键，并在渲染组件中利用react-i18next的t函数和keyPrefix功能，我们成功地实现了React应用中外部数据结构的国际化。这种方法保持了数据文件的纯净性，将翻译逻辑与数据定义分离，提高了代码的可维护性和可扩展性，使得管理多语言应用变得更加高效和便捷。

到这里，我们也就讲完了《React集成i18n：翻译文件使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！