引言
在构建多语言web应用时，国际化（i18n）是不可或缺的一环。react-i18next是一个功能强大且灵活的库，用于在react应用中实现国际化。通常，我们会在react组件中使用usetranslation hook来获取翻译函数t，并直接在jsx中调用它。然而，当应用程序的导航菜单或类似配置数据存储在独立的javascript文件中时，如何将这些静态数据中的标题进行国际化，成为了一个常见挑战。直接在非react组件的纯javascript数据文件中使用usetranslation是不可行的，因为它是一个hook，必须在函数组件内部调用。
本教程将提供一种优雅的解决方案，使你能够在不改变数据文件结构本质的情况下，实现导航标题的动态翻译。
解决方案概述
核心思想是将数据文件中的具体显示文本替换为抽象的“翻译键”（Translation Key）。这些键将作为在翻译资源文件中查找对应文本的标识符。当组件渲染这些数据时，它会使用useTranslation Hook提供的t函数，根据当前语言环境和翻译键动态获取并显示正确的翻译文本。
具体步骤如下：
- 修改数据文件 (NavbarData.js)：将导航项的title属性值从实际文本改为唯一的翻译键。
- 修改组件文件 (Navbar.js)：在渲染导航项时，使用t()函数包裹item.title，以实现动态翻译。
- 配置翻译资源文件 (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文件都包含相同的键结构，即使某些翻译暂时缺失，也应保留键以避免运行时错误。
重要注意事项
- i18n.init() 配置：本教程假设你已经在应用程序的入口文件（如index.js或App.js）中正确配置了i18n.init()，并加载了翻译资源文件。这是react-i18next正常工作的基础。
- 数据文件与Hook：再次强调，NavbarData.js是一个纯数据文件，不应导入或使用任何React Hook。useTranslation Hook只能在React函数组件内部使用。
- 翻译键的命名：建议使用小驼峰（camelCase）或蛇形（snake_case）命名翻译键，并保持一致性，以提高可读性和维护性。
- 动态标题翻译：对于Navbar.js中其他需要翻译的动态标题，例如pageTitle，你同样需要将其值设为翻译键，并在渲染时使用t(pageName)。例如，如果pageName可能被设置为"User Information"，你需要将其改为"userInformation"，并在翻译文件中定义"userInformation": "User Information"。
- 灵活性：这种方法不仅适用于导航数据，还可以应用于任何存储在外部JavaScript文件中的配置数据，例如表单字段标签、表格列名等，只要这些数据最终在React组件中被渲染。
总结
通过将外部数据文件中的实际文本替换为翻译键，并在渲染组件中利用react-i18next的t函数和keyPrefix功能，我们成功地实现了React应用中外部数据结构的国际化。这种方法保持了数据文件的纯净性，将翻译逻辑与数据定义分离，提高了代码的可维护性和可扩展性，使得管理多语言应用变得更加高效和便捷。
