使用ReactJS实现多语言网站

Question

我正在寻找一种方法来将整个网站（主页、关于我们、产品页面、联系方式、常见问题等）翻译成多种语言。该网站是使用ReactJS和Firebase数据库构建的。

我发现的所有示例都只是小型翻译，例如问候语或“How are you”，但对于整个网站呢？我的最佳选择是为每种语言创建一个JS对象，并使用数百甚至数千个模板字符串进行操作吗？（这肯定会导致像“homepageContactSectionSubDiscription”或“homepageProductSectionFeaturesItemTwo”这样的标签）

- Thore

---

请使用 https://github.com/yahoo/react-intl。 - Paul Fitzgerald

你没有研究过这个吗？i8ln React或React本地化会带来大量的资源。 - epascarello

我个人直接使用 https://www.i18next.com，并且使用起来非常愉快... - Leon

Answer 1

你应该考虑使用react-intl。Github 你可以指定各种语言文件：

en.json

{
    "greeting": "Hello"
}

es.json

{
    "greeting": "Hola"
}

然后在组件中使用 FormattedMessage 来调用它们：

import { FormattedMessage } from 'react-intl';
...
<FormattedMessage id="greeting" />

React Intl 提供了一个包装器，使您的应用程序能够指定不同的语言及其相关的消息。

ReactDOM.render(
    <IntlProvider locale="en">
        <App />
    </IntlProvider>,
    document.getElementById('app')
);

一个重要的注意事项是，这不会为您执行翻译，而是提供一种基于指定的locale从不同语言文件中提取的方法。

如果您发现自己有一个非常大的语言文件，可以将其拆分成不同的部分。例如，我可能有两个文件，home.json和settings.json，我可以设置为访问home.{unique_id}或settings.{another_unique_id}。

- Wolfie

---

是的，但那只是一个简单问候的例子。我说的是数百个元素。我是否需要为每个元素分配唯一的ID，例如“homepageProductSectionFeaturesItemTwo”？ - Thore

@Thore 是的，没有什么服务可以为您提供翻译，虽然您可以付费以生成翻译。我倾向于按页面/组件拆分我的语言文件，类似于您在React中所做的，并针对常用单词/短语使用单独的文件。 - Wolfie

@Thore 此外，每个元素都应该有一个唯一的 id。 - Wolfie

@Wolfie，你的意思是每个元素都需要手动添加吗？我有一个包含1000个元素的英语语言文件，现在我的客户需要支持阿拉伯语网站。那么我需要通过手动将元素值放入阿拉伯语语言文件来更新它吗？这很难更新，请确认一下。 - Nishant

@NishantPandya 是的，完全正确。你可能能够找到一个服务来为你完成这个过程，但否则它需要手动完成。 - Wolfie