本文详解如何在 React 中使用 i18next 对外部 JSON 数组（如项目列表）中的字段（如 periode、info）进行动态、可维护的国际化翻译，涵盖命名空间配置、键名拼接、组件级与列表级翻译策略及常见陷阱规避。
本文详解如何在 react 中使用 i18next 对外部 json 数组（如项目列表）中的字段（如 `periode`、`info`）进行动态、可维护的国际化翻译，涵盖命名空间配置、键名拼接、组件级与列表级翻译策略及常见陷阱规避。
在基于 react-i18next 的多语言 React 应用中，直接将待翻译文本硬编码在数据层（如 bananeData 数组）会导致维护困难、无法复用翻译资源，且违背 i18n 最佳实践。正确方式是：让数据只存翻译键（key），而非原始文案；由组件在渲染时通过 t() 函数动态解析对应语言值。
✅ 正确的数据结构设计（关键第一步）
修改 bananeData.js，将 periode 和 info 字段替换为语义化、可组合的翻译键：
// src/data/bananeData.js
export const bananeData = [
{
id: 1,
key: 'project_AAA', // 唯一标识符，用于动态拼接翻译键
picture: './media/banane.png'
},
{
id: 2,
key: 'project_BBB',
picture: './media/orange.png'
}
];
⚠️ 注意：原数据中缺失 name 字段，而 Banana 组件中解构了 name —— 此处应统一使用 key 或补充 name 字段。推荐使用 key 作为翻译基础，避免冗余。
✅ 翻译 JSON 键名规范（与数据对齐）
确保 public/locales/en/translation.json（及对应语言文件）包含按约定生成的键：
{
"navigation_bananes": "Bananas",
"project_AAA_periode": "2022 – 2023",
"project_AAA_info": "A full-stack banana visualization dashboard.",
"project_BBB_periode": "2019 – 2022",
"project_BBB_info": "AI-powered banana ripeness classifier."
}
键名格式建议为：{projectKey}_{field}（如 project_AAA_periode），便于逻辑拼接与维护。
✅ 组件内动态翻译（推荐：职责分离 + 可读性高）
在 Banana.js 中引入 withNamespaces 并使用 t() 拼接键：
// src/components/Banana.js
import React, { Component } from 'react';
import { withNamespaces } from 'react-i18next';
class Banana extends Component {
state = { showInfo: false };
handleInfo = () => this.setState(prev => ({ showInfo: !prev.showInfo }));
render() {
const { item } = this.props;
const { t } = this.props; // ✅ 获取 t 函数
// ✅ 动态拼接翻译键：item.key + '_periode' → 'project_AAA_periode'
const periodeKey = `${item.key}_periode`;
const infoKey = `${item.key}_info`;
return (
<div classname="project">
<h5>{t(periodeKey)}</h5>
<h3>{t(item.key)}</h3> {/* 若需翻译项目名，确保 translation.json 中有 "project_AAA" 键 */}
@@##@@
<span classname="infos" onclick="{this.handleInfo}">
<i classname="fas fa-plus-circle"></i>
</span>
{this.state.showInfo && (
<div classname="showInfos">
<div classname="infosContent">
<div classname="head"><h2>{t(item.key)}</h2></div>
<p classname="text">{t(infoKey)}</p>
<div classname="button return" onclick="{this.handleInfo}">{t('common_close')}</div>
</div>
</div>
)}
</div>
);
}
}
// ✅ 必须指定 namespace（此处为 'translation'），否则 t() 无法定位资源
export default withNamespaces('translation')(Banana);
? 提示：withNamespaces('translation') 显式声明命名空间，与 i18n.init({ defaultNS: 'translation' }) 配合更稳妥。若已全局设 defaultNS，可简写为 withNamespaces()。
✅ 列表级预翻译（备选：性能敏感场景）
若 Banana 组件无需感知 i18n（如纯展示），可在父组件 BananaList 中提前翻译并透传：
// src/components/BananaList.js
import React, { Component } from 'react';
import { bananeData } from '../data/bananeData';
import Banana from './Banana';
import { withNamespaces } from 'react-i18next';
class BananaList extends Component {
state = { projects: bananeData };
render() {
const { projects } = this.state;
const { t } = this.props;
return (
<div>
<h3>{t('navigation_bananes')}</h3>
<div>
{projects.map(item => {
// ✅ 在列表层完成键值解析，子组件接收已翻译文本
const translatedItem = {
...item,
periode: t(`${item.key}_periode`),
info: t(`${item.key}_info`),
name: t(item.key) // 可选：翻译项目名
};
return <banana key="{item.id}" item="{translatedItem}"></banana>;
})}
</div>
</div>
);
}
}
export default withNamespaces('translation')(BananaList);
此时 Banana.js 无需 withNamespaces，保持轻量无 i18n 依赖。
⚠️ 关键注意事项与避坑指南
- 命名空间必须显式声明：withNamespaces('translation') 不可省略（除非全局配置 defaultNS）；
- 键名拼接需严格校验：t(${item.key}_periode) 要求 item.key 值完全匹配 JSON 中前缀（如 'project_AAA'），建议添加 fallback：t(${item.key}_periode, { defaultValue: item.periode })；
- 避免在数据层硬编码文案：bananeData 应只含业务标识（key, id, picture），不包含任何自然语言字符串；
- 图片 alt 属性务必翻译：增强可访问性，如 alt={t(item.key)}；
- 版本兼容性提醒：你使用的 i18next@21.x 与 react-i18next@11.x+ 已弃用 withNamespaces（推荐 useTranslation Hook）。若升级，应改写为函数组件 + useTranslation('translation')。
✅ 总结
实现 JSON 数组字段的 i18next 翻译，核心在于 “数据存键、视图调用、键名可拼” 三原则。优先采用组件内动态拼接（t(${key}_field)），保证翻译上下文清晰；对性能或架构有特殊要求时，再考虑列表层预翻译。始终确保翻译键在 JSON 文件中存在，并通过命名空间精准定位资源——这既是可维护性的基石，也是国际化工程化的标准实践。
