如何用react-i18next高效翻译非硬编码的状态值（如GOOD/BAD）

直接把状态值（GOOD/BAD）和翻译键做一一映射，就能彻底省去条件判断，步骤如下：

1. 调整语言文件结构 #

在各语言的翻译文件中，把空气质量状态作为嵌套键值对维护，比如：

英文翻译文件（en.json）：

{
  "airQuality": {
    "GOOD": "Good Air Quality",
    "BAD": "Poor Air Quality"
  }
}

中文翻译文件（zh.json）：

{
  "airQuality": {
    "GOOD": "空气质量良好",
    "BAD": "空气质量不佳"
  }
}

2. 组件中直接调用翻译 #

不需要任何条件分支，直接通过状态值拼接翻译键，调用t函数即可：

import { useTranslation } from 'react-i18next';

const AirQualityStatus = ({ status }) => {
  const { t } = useTranslation();
  // 直接用状态值拼接键名，自动匹配当前语言的翻译
  return <span>{t(`airQuality.${status}`)}</span>;
};

3. 可选：添加默认值容错 #

如果担心状态值出现未定义的情况，可以给t函数加默认值，避免显示空内容：

t(`airQuality.${status}`, { defaultValue: status });

这种方式的优势在于：

• 完全消除冗余的条件判断代码
• 翻译逻辑和业务逻辑解耦，新增状态时只需在语言文件中补充键值对即可
• 语言文件结构清晰，便于维护

内容的提问来源于stack exchange，提问作者dabljues