react-intl vs react-i18next用于ReactJS国际化(i18n)

Question

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

从我所看到的有两个非常受欢迎的图书馆:

reac -intl和 react-i18next

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

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

Answer 1

@ whyp的回应没有考虑到react-i18next是i18next的一部分,它有额外的2100颗星(后面没有一个庞大的公司).

react-intl可能相当令人困惑(个人意见).i18next肯定更容易集成提供更多功能(加载资源,检测用户语言)

i18next没有反应 - 学习一次到处使用(https://www.i18next.com/supported-frameworks.html)

i18next还有一个额外的服务层:http://locize.com/ 解决国际化(i18n)旁边的本地化流程

Answer 2

JS-临桂

我想提出一个我开发的替代i18n库.

• 适用于Vanilla JS(lingui-i18n)和React(lingui-react)
• lingui-react 是唯一一个完全支持内联组件和丰富格式的库(见下文)
• 构建在ICU MessageFormat之上
• 还包括lingui-cli用于构建消息目录的CLI()
• 它在编译期间使用Flow类型和大量验证来捕获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 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主要文档的一部分.

内联组件和丰富的格式

我开始编写这个lib,因为我希望a)更简单的语法和b)完全支持内联组件.

双方react-intl并react-i18next有丰富的文本和系列组件的支持非常有限.您可以在components(This is <strong>bold</strong> text.)中使用基本的html标签,也可以将组件作为变量(This is {el} text.where el = <strong>bold</strong>)注入.

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

与lingui-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一起使用,则需要弹出或分叉,这是一个问题react-scripts.

Answer 3

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

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