【问题标题】:i18n for react, formatjs, react-intli18n 用于 react、formatjs、react-intl
【发布时间】:2015-07-27 09:00:11
【问题描述】:

我想在我的 react 应用程序中为我的 i18n 使用 ICU 标准。我想存储我的语言文件,例如 http://userguide.icu-project.org/locale/localizing#TOC-.txt-resource-bundles

de {
  key1 { "Deutsche Sprache "
         "schwere Sprache" }
  key2 { "Düsseldorf" }
}

我找到了这个库http://formatjs.io/react/http://formatjs.io/ 支持 ICU,但是我找不到任何好的示例如何将我的语言文件与我的应用程序连接。

我正在阅读他们的教程,看来我可以使用组件<FormattedMessage>。所以例如

var intlData = {
    "locales": "en-US",
    "messages": {
        "photos": "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n"
    }
};

React.render(
    <Component {...intlData} />,
    document.getElementById('example')
);

然后在某些组件中我有

...
render: function () {
        return (
            <p>
                <FormattedMessage
                    message={this.getIntlMessage('photos')}
                    name="Annie"
                    numPhotos={1000}
                    takenDate={Date.now()} />
            </p>
        );
    }

我最大的问题是如何转换我的语言文件,例如

en-US {
  photos { "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n" }
}

转成格式:

var intlData = {
    "locales": "en-US",
    "messages": {
        "photos": "{name} took {numPhotos, plural,\n  =0 {no photos}\n  =1 {one photo}\n  other {# photos}\n} on {takenDate, date, long}.\n"
    }
};

是否有任何解析器/转换器?

【问题讨论】:

  • 如果你有react.i18next.com,为什么还要为icu消息格式而苦苦挣扎;)

标签: reactjs icu formatjs


【解决方案1】:

您应该检查此存储库https://github.com/gpbl/isomorphic500。在 intl 子目录中有不同语言的输入文件。

您还可以查看他们采用哪种类型的解析!希望这会有所帮助。

【讨论】:

  • 感谢您指出这个示例应用程序。这是如何在 Flux/Fluxible 应用程序中使用 FormatJS 的一个很好的例子
猜你喜欢
  • 2017-09-13
  • 2021-09-22
  • 1970-01-01
  • 2018-02-16
  • 2017-04-26
  • 2019-01-18
  • 1970-01-01
  • 1970-01-01
  • 2022-01-11
相关资源
最近更新 更多