使用参数翻译文本

时间:2017-12-05 20:16:13

标签: javascript reactjs react-redux translation

我正在制作多语言反应应用。我使用redux来存储包含我所有翻译的对象。

en.json

{
 "loginMessage": "Welcome to my app",
 "loginButton": "Log in",
 "summary": "Viewing {p1} items totalling {p2}"
}

es.json

{
 "loginMessage": "Bienvenido",
 "loginButton": "Iniciar sesion",
 "summary": "Viendo {p1} elementos totalizando {p2}"
}

我的应用中的部分文字是动态的,这意味着它包含数字或html标签。例如

  

查看总计 $ 300.00 15 项目。

所以我需要在字符串之间包含一些html标签。我想出了一个部分解决方案,它使用的函数替换了我提供的变量的参数。通过这种方法,我必须提供html标记作为变量的一部分,就像这样。

replaceAll(translation.summary, {
 "{p1}": `<strong> ${expenses.count} </strong>`,
 "{p2}": `<strong> ${expenses.total} </strong>`
})

我还需要将此函数放在名为 dangerouslySetInnerHTML 的react参数中,否则将html标记视为字符串。

这是完成工作但我想知道是否有更好的方法。使用我不知道的功能。

2 个答案:

答案 0 :(得分:2)

根据我的经验,有两个不同的网址要好得多。你可以使用谷歌翻译。 NPM

答案 1 :(得分:1)

你可以使用之前使用过的i18n-react非常有用。 https://www.npmjs.com/package/i18n-react