我正在构建一个应用程序,它将需要提供多种语言和区域设置。
我的问题不是纯粹的技术问题,而是关于架构以及人们在生产中实际用来解决此问题的模式的问题。我在那里找不到任何“食谱”,所以我转向了我最喜欢的问答网站:)
这是我的要求(它们实际上是“标准”):
- 用户可以选择语言(平凡)
- 更改语言后,界面应自动翻译成新选择的语言
- 我现在不太担心格式化数字,日期等的问题,我想要一个简单的解决方案来只翻译字符串
这是我可以考虑的可能解决方案:
每个组件都独立处理翻译
这意味着每个组件在其旁边都有例如一组en.json,fr.json等文件以及转换后的字符串。以及一个帮助程序功能,可帮助您根据所选语言从这些值中读取值。
- Pro:更尊重React理念,每个组件都是“独立的”
- 缺点:您无法将所有翻译集中在一个文件中(例如,让其他人添加新语言)
- 缺点:您仍然需要在每个血腥部分及其子女中传递当前语言作为道具
每个组成部分都通过道具接收翻译
所以他们不知道当前的语言,他们只是拿一个字符串列表作为道具,恰好匹配当前的语言
- 优点:由于这些字符串是“自上而下”的,因此可以将它们集中在某个位置
- Cons: Each component is now tied into the translation system, you can't just re-use one, you need to specify the correct strings every time
You bypass the props a bit and possibly use the context thingy to pass down the current language
- Pro: it's mostly transparent, don't have to pass the current language and/or translations via props all the time
- Cons: it looks cumbersome to use
If you have any other idea, please do say!
How do you do it?