React中如何结合语言与featureId双条件为变量赋值？

一、语言与featureId条件结合的实现思路 #

直接嵌套三元表达式会导致代码可读性极差，更推荐用对象映射的方式整合两个条件，既简洁又易维护。

二、嵌套对象方案的可行性与最优解 #

方案完全可行，且是当前场景下的最优解 #

通过嵌套对象整合语言和变体维度，直接通过locale和featureId双层取值，逻辑清晰、扩展性强。

具体实现步骤 #

1. 重构内容数据结构：把所有语言的所有变体统一组织成嵌套对象：

// 替换为你的实际内容结构
const featureContents = {
  en: {
    option1: { /* 英文option1对应的内容 */ },
    option2: { /* 英文option2对应的内容 */ },
    option3: { /* 英文option3对应的内容 */ }
  },
  de: {
    option1: { /* 德文option1对应的内容 */ },
    option2: { /* 德文option2对应的内容 */ },
    option3: { /* 德文option3对应的内容 */ }
  },
  fr: { /* 法语内容结构同上 */ },
  es: { /* 西班牙语内容结构同上 */ },
  ru: { /* 俄语内容结构同上 */ }
};

2. 双层取值+默认兜底：

const router = useRouter();
const { locale } = router;
const featureId = props.id;

// 优先取当前语言的内容，取不到则用英文兜底
const targetLangContent = featureContents[locale] || featureContents.en;
// 优先取对应变体的内容，取不到则用option1兜底（可根据需求调整默认值）
const featureContent = targetLangContent[featureId] || targetLangContent.option1;

该方案的优势 #

• 可读性强：数据结构和取值逻辑一目了然，远胜多层嵌套的三元表达式
• 易维护：新增语言或变体时，只需在featureContents中添加对应属性，无需修改业务逻辑
• 扩展性好：后续新增更多语言/变体，代码结构无需大幅调整

三、兼容原有变量结构的过渡方案 #

如果暂时不想重构原有featureContentEn、featureContentDe等变量（假设每个变量本身已包含option1/2/3属性），可以先将这些变量映射为对象再取值：

const router = useRouter();
const { locale } = router;
const featureId = props.id;

// 先把单个语言的内容变量映射为对象
const langContentMap = {
  en: featureContentEn,
  de: featureContentDe,
  fr: featureContentFr,
  es: featureContentEs,
  ru: featureContentRu
};

const targetLangContent = langContentMap[locale] || langContentMap.en;
const featureContent = targetLangContent[featureId] || targetLangContent.option1;

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