javascript - ReactJS 中的多语言网站

Question

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

我找到的所有示例都只是一些小的翻译，比如问候语或你好吗，但是完整的网站呢？我最好的选择是为每种语言制作一个 JS 对象并使用成百上千个模板字符串吗？ (那绝对应该以“homepageContactSectionSubDiscription”或“homepageProductSectionFeaturesItemTwo”之类的标签结尾)

Answer 1

您应该考虑使用 react-intl。 Github

您可以指定各种语言文件:

zh.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')
);

重要说明，这不会为您执行翻译，但会为您提供一种根据指定的区域设置从不同语言文件中提取的方法。

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