React使用useTranslation()无法正常显示双大括号问题如何解决

react-i18next 默认使用 {{ 和 }} 作为插值变量的标识，替换完第一层变量后，会继续扫描结果中的双大括号尝试二次插值。你传入的 param 中的 {{someString}} 会被识别为未定义的插值变量，最终被替换为空，所以无法得到预期输出。

方案1：关闭二次插值（推荐） #

在调用 t() 函数时添加配置，禁止对替换后的变量内容做二次插值处理，代码修改如下：

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
    const { t } = useTranslation()
    const param = "{{someString}}"
    return <p>{t('translate', {param}, { interpolation: { skipOnVariables: true } })}</p>   
}

这个方案不需要修改翻译配置，只调整当前调用的逻辑，不会影响其他翻译项的功能，适配你当前动态传入带双大括号参数的场景。

方案2：转义固定双大括号内容 #

如果是翻译文本里固定要输出双大括号，不需要动态传参替换，可以直接在翻译配置里用双反斜杠转义大括号：

"translate": "my output string \\{\\{someString\\}\\}"

调用时不需要传入param参数，直接写 t('translate') 即可输出预期结果。

方案3：修改全局插值标识 #

如果项目里大量需要原样输出双大括号，可以在i18next的初始化配置中修改插值的前缀和后缀，替换为其他不常用的符号：

i18n.init({
  // 其他原有配置
  interpolation: {
    prefix: '[[',
    suffix: ']]',
  }
})

调整后翻译配置里的插值变量统一用 [[param]] 写法即可，所有双大括号都会被默认原样保留。该改动是全局的，需要同步调整所有已有的翻译配置，更适配新项目或者全量改造的场景。

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