46

我需要使用 ReactJS 构建一个多语言应用程序。该应用程序需要针对不同语言的自定义字典以及日期/时间、数字和货币的自动格式化。

从我所见，有 2 个非常受欢迎的库：

react -intl和react-i18next

一个和另一个之间有什么优势？什么是最受支持和最受欢迎的？

支持多种语言的 ReactJS 应用程序的一般选择是什么？

4

3 回答 3

25

js-lingui

我想介绍一个我开发的替代 i18n 库。

  • 适用于 Vanilla JS ( lingui-i18n) 和 React ( lingui-react)
  • lingui-react是唯一完全支持内联组件和丰富格式的库（见下文）
  • 建立在 ICU MessageFormat 之上
  • lingui-cli还包括用于构建消息目录的CLI ( )
  • 它在编译期间使用流类型和大量验证来捕获 MessageFormat 中的明显错误

句法

ICU MessageFormat 非常灵活，因为它支持变量、复数、序数、选择、数字/日期格式，并且也是可扩展的。但是，复杂的消息很难编写。

lingui-i18n使用 ES6 标记的​​模板文字提供方便的语法，同时lingui-react使用 React 组件提供类似的语法

香草JS

import { i18n } from 'lingui-i18n'

i18n.t`Hello World`
i18n.t`Hello, my name is ${name}`
i18n.plural({ value: count, one: "# book", other: "# books" })

lingui-i18n 文档中的更多示例

反应

import React from 'react'
import { Trans, Plural } from 'lingui-react'

class App extends React.Component {
  render() {
    const name = "Fred"
    const count = 42

    return (
      <div>
      // Static text
      <Trans>January</Trans>

      // Variables
      <Trans>Hello, my name is {name}</Trans>

      // Components
      <Trans>See the <a href="/more">description</a> below.</Trans>

      // Plurals
      <Plural 
        value={count} 
        zero={<strong>No books</strong>}
        one="# book" 
        other="# books" 
      />
      </div>
    )
  }
}

文档是js-lingui主要文档的一部分。

内联组件和丰富的格式

我开始编写这个库是因为我想要 a) 更简单的语法和 b) 对内联组件的完全支持。

两者都对富文本react-intl和react-i18next内联组件的支持非常有限。您可以在组件内使用基本的 html 标签 ( This is <strong>bold</strong> text.) 或将组件作为变量注入 ( This is {el} text.where el = <strong>bold</strong>)。

第一种方法的问题是您不能使用自定义 React 组件。第二种方法的问题是翻译器使用 2 条消息而不是 1 条 (This is {el} text.和bold)。这实际上非常糟糕，因为您需要翻译整个句子以保持上下文。

lingui-react你可以在翻译中使用任何React组件，并且消息被提取为一个片段：

<Trans>See the <Link to="/more">description</Link> below.</Trans>
// for translator: See the <0>description</0> below.

此解决方案的另一个优点是组件名称和道具隐藏在提取的消息中。class我记得我们是如何在更改内部元素后才花费大量时间更新翻译的。

只需将其与react-i18next或react-intl中的插值进行比较。

要求

两者都lingui-i18n需要lingui-react预设才能使一切正常。如果您想将它与 Create React App 一起使用，这是一个问题，因为您需要弹出或 fork react-scripts。

于 2017-06-17T00:20:25.743 回答
8

一般的选择是 react-intl，它比 react-i18next 更受欢迎。它目前在 github 上有 4.5k vs react-i18next 的 300 颗星。它是 React 中本地化的首选解决方案。

这是一个入门教程： https ://medium.freecodecamp.com/internationalization-in-react-7264738274a0

于 2017-04-17T21:59:01.383 回答
4

试试阿里巴巴集团开发的https://github.com/alibaba/react-intl-universal 。yahoo/react-intl 只能应用在视图层，例如 React.Component。对于 Vanilla JS 文件，没有办法将其国际化。例如，以下代码片段是我们应用程序中许多 React.Component 使用的通用表单验证器。

export default const rules = {
  noSpace(value) {
    if (value.includes(' ')) {
      return 'Space is not allowed.';
    }
  }
};

alibaba/react-intl-universal简单但功能强大。它不会改变组件的行为。并且可以在 JSX 和普通的 JS 文件中使用。

于 2017-06-16T06:50:32.250 回答