ReactJS 国际化 (i18n) 的 react-intl 与 react-i18next

Question

我需要使用 ReactJS 构建多语言应用程序。该应用程序需要不同语言的自定义词典以及 date/time、数字和货币的自动格式设置。

据我所知，有 2 个非常流行的库：

react-intl and react-i18next

两者之间的优势是什么？最受支持和最受欢迎的是什么？

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

Answer 1

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

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

Answer 2

试试阿里巴巴集团开发的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 文件中使用。

Answer 3

js-lingui

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

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

语法

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

lingui-i18n 使用 ES6 标记的模板文字提供方便的语法，而 lingui-react 使用 React Components

提供类似的语法

香草 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 docs

中有更多示例

反应

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>
    )
  }
}

docs 是 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 条消息而不是一条消息（This is {el} text. 和 bold）。这实际上非常糟糕，因为您需要翻译整个句子以保持上下文。

使用 lingui-react 你可以使用 any React components inside translations and the message is extracted in a piece:

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

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

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

要求

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

ReactJS 国际化 (i18n) 的 react-intl 与 react-i18next

react-intl vs react-i18next for ReactJS internationalization (i18n)

javascript

internationalization

reactjs

react-intl

react-i18next

js-lingui

语法

香草 JS

反应

内联组件和丰富的格式

要求