javascript - 翻译带参数的文本

标签 javascript reactjs react-redux translation

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

zh.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 标签。例如

Viewing 15 items totalling $300.00.

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

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

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

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

最佳答案

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

关于javascript - 翻译带参数的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47661944/

相关文章:

javascript - 通过使用 aws-sdk 在 s3 Bucket 上上传图像来 react native

javascript - React 调度未定义删除操作

reactjs - 如何使用 react-redux 将错误 500 全局重定向到页面

javascript - jquery 选项卡显示 :none hiding all inner divs

javascript - 防止数组项被选择两次

javascript - 为什么要分派(dispatch)组件而不是操作文件?

javascript - Redux mapStateToProps 属性依赖

javascript - 在页面加载时增加 DIV?

javascript - 在 React 中使用 $splice(来自 immutability-helper)而不是 filter 从数组中删除项目有什么优势?

javascript - 我怎样才能逃避 React useEffect 无限循环?