i18next动态值插入及加粗显示异常问题求助

问题原因 #

city值未填充的核心问题是Trans组件的标签映射逻辑未正确匹配：翻译文件中的<2>{{city}}</2>标签，没有和组件内的对应JSX元素形成关联，导致第二个动态值未被正确替换。

修复方案 #

方案1：使用components属性指定标签映射（推荐） #

这种方式更清晰，避免JSX结构与翻译文件索引的耦合：

1. 修改Trans组件代码：

let nextCity= 'Mumbai';
let userName = 'Jane';
<Trans
  i18nKey="common.greeting"
  values={{ name: userName, city: nextCity }}
  components={[<strong />, <strong />]}
/>

2. 翻译文件保持现有配置不变：

// en
{
  "common": {
    "greeting": "Hello <1>{{name}}</1> will see you in <2>{{city}}</2> !"
  }
}

// de
{
  "common": {
    "greeting": "Hallo <1>{{name}}</1> wir sehen uns in <2>{{city}}</2> !"
  }
}

方案2：确保默认JSX结构与翻译文件标签索引完全匹配 #

如果要保留Trans组件内部的默认文本，需保证内部JSX元素的顺序、数量与翻译文件中的<1>、<2>标签完全对应：

let nextCity= 'Mumbai';
let userName = 'Jane';
<Trans
  values={{ name: userName, city: nextCity}}
  i18nKey="common.greeting">
    Hello <strong>{{name}}</strong> will see you in <strong>{{city}}</strong> !
</Trans>

此时翻译文件中的<1>对应第一个<strong>，<2>对应第二个<strong>，动态值会被正确注入到对应标签内。

额外检查项 #

• 确认i18next初始化时未禁用插值功能，默认配置下interpolation.escapeValue为true，Trans组件会自动处理HTML标签渲染，无需额外修改。
• 验证nextCity变量已正确赋值（你的代码中已设置为Mumbai，这部分无问题）。

内容的提问来源于stack exchange，提问作者four-eyes