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

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 6 年前。

Improve this question

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

据我所知，有 2 个非常受欢迎的库:

<强> react-intl 和 react-i18next

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

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

Answer 1

js-lingui

我想展示我开发的替代 i18n 库。

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

语法

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

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

react

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. ) 或将组件作为变量注入(inject) ( This is {el} text. 其中 el = <strong>bold</strong> )。

第一种方法的问题是您无法使用自定义 React 组件。第二种方法的问题是翻译器使用 2 条消息而不是一条( 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.

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

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

要求

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