# @connectedcars/react-i18n 中文文档

规范地址：https://npmcn.com/package/%40connectedcars/react-i18n/

版本：2\.4\.0
npm 元数据更新时间：2026-06-04T15:03:00.295Z
中文译文更新时间：2026-11-14T11:45:47.068Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40connectedcars/react-i18n
原文对照：https://npmcn.com/package/%40connectedcars/react-i18n/?lang=original
项目主页：https://github.com/connectedcars/react-i18n#readme
源码仓库：https://github.com/connectedcars/react-i18n

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：111 kB，89 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \*，react-dom \*
- 首次发布：2017-12-18T10:21:23.368Z
- 最新版本发布：2025-02-26T11:27:46.287Z
- 近 30 天下载量：2059（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 0 个）

## 中文简介

翻译!

## 安装

```sh
npm install @connectedcars/react-i18n
```

也可以使用：`pnpm add @connectedcars/react-i18n`、`yarn add @connectedcars/react-i18n`、`bun add @connectedcars/react-i18n`

## README

[![npm version](https://badge.fury.io/js/@connectedcars%2Freact-i18n.svg)](https://www.npmjs.com/package/@connectedcars/react-i18n)

# @ connectedcars/ react-i18n (英语)

## 安装

`npm install @connectedcars/react-i18n`

## 使用量

见 `example` 位于 `example` 文件夹。 特别是背景是如何设置的.

后从上下文取出翻译.

`const {t} = this.context`

何处 `t` 返回已翻译的字符串.

翻译一个简单的文本:

`t('This text should be translated')`

翻译包含变量的文本 :

`t('This {word} is in a translated sentence.', { word: 'Variable'})`

翻译复数( E)`n` 被注入到数据对象中,但可以覆盖:

`tn(count, '{n} time', '{n} times')`

多个行也被支持使用模板字符串(然而, **别** 使用情况 `${}` 变量 :

```
t(`Foo
   bar
   baz`)
```

_但请注意,这些翻译不会在HTML中多行提供!_

用反应翻译 :

```
// Use `tnx` for plurals with JSX!
tx(`
  <p>Hello, <strong>{name}</strong></p>
  <p>Today is {day}</p>
`, {
  p: content => <p>{content}</p>,
  strong: content => <strong>{content}</strong>,
  name: 'John Doe',
  day: 'Monday'
})
```

_请注意, 默认翻译为严格模式, 也就是说, 未定义的类型将出现错误_ _请注意,可以通过设置添加白名单/默认 `jsxWhitelist` 编辑 `I18nPovider`。 。 。 ._

您也可以在翻译中添加上下文 :

`t('Hello', null, 'context here')`

## 进出口

您首先需要设置您的导入和导出脚本 `package.json`

```
...

"scripts": {
  "import": "i18n-import",
  "export": "i18n-export",
}

...
```

然后可以运行以下命令:

-   `npm run export` 创建 POT 文件,其中包含已提取的翻译 `./locales/template.pot`
-   `npm run import` 创建包含您全部翻译的 json 文件 `./src/translations.json`

运行 `npm run import --stripCountry` 将删除国家代码 在相应的文件中, ie。 键 `da_DK` 将变成 `da`。 。 。 .

## 中情局

要获得 CI 的输出,请添加以下脚本:

```
  "ci-translation": "i18n-translation-status"
```

## 线性

见我们的 Eslint 插件 : [https://github.com/接通车站/eslint-plugin-react-i18n](https://github.com/connectedcars/eslint-plugin-react-i18n)

## 示例

```tsx
import React from 'react'
import ReactDOM from 'react-dom'
import {
  I18nStore,
  I18nProvider,
  I18nContext,
  I18nConsumer,
  useTranslate,
  withTranslate,
} from '@connectedcars/react-i18n'
import './index.css'

const translations = {
  "da": {
    "": {
      "content-type": "text/plain; charset=UTF-8",
      "project-id-version": "",
      "pot-creation-date": "",
      "po-revision-date": "",
      "language-team": "",
      "mime-version": "1.0",
      "content-transfer-encoding": "8bit",
      "x-generator": "Poedit 2.0.6",
      "last-translator": "",
      "plural-forms": "nplurals=2; plural=(n != 1);",
      "language": "da"
    },
    "Hello {name}": [
      null,
      "Hej {name}"
    ],
    "Set language to <lang />": [
      null,
      "Skift sprog til <lang />"
    ]
  }
}

const store = new I18nStore({
  translations,
  locale: 'da',
  defaultLocale: 'en',
})

class ExampleA extends React.Component {
  static contextType = I18nContext

  render() {
    return <div>{this.context.t('Hello {name}', { name: 'World' })}</div>
  }
}

class ExampleB extends React.Component {
  render() {
    return (
      <I18nConsumer>
        {i18n => {
          return <div>{i18n.t('Hello {name}', { name: 'World' })}</div>
        }}
      </I18nConsumer>
    )
  }
}

const ExampleC = withTranslate(props => {
  return <div>{props.t('Hello {name}', { name: 'World' })}</div>
})

const ExampleD: React.FC = props => {
  const { tx } = useTranslate()

  return (
    <div>
      {tx('<strong>Hello</strong> there <link>test</link>', {
        strong: content => <strong>{content}</strong>,
        link: content => <a href="https://example.com">{content}</a>
      })}
    </div>
  )
}

const ToggleLocale: React.FC = () => {
  const { tx, setLocale, locale } = useTranslate()
  const swapLocale = locale === 'da' ? 'en' : 'da'

  return (
    <button onClick={() => setLocale(swapLocale)}>
      {tx('Set language to <lang />', {
        lang: (content, attr) => <strong>{swapLocale}</strong>,
      })}
    </button>
  )
}

ReactDOM.render(
  <I18nProvider store={store}>
    <ExampleA />
    <ExampleB />
    <ExampleC />
    <ExampleD />
    <ToggleLocale />
  </I18nProvider>,
  document.getElementById('root')
)
```

## 常见问题

### @connectedcars/react-i18n 是什么？

翻译\!

### 如何安装 @connectedcars/react-i18n？

在项目目录运行 npm install @connectedcars/react-i18n，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-dom（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 i18n-export、i18n-import、i18n-translation-status，可以用 npx i18n-export 直接运行。

### @connectedcars/react-i18n 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @connectedcars/react-i18n 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @connectedcars/react-i18n 可以商用吗？

@connectedcars/react-i18n 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @connectedcars/react-i18n 的下载量有多少？

根据 npm 官方下载统计，@connectedcars/react-i18n 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,059 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @connectedcars/react-i18n 还在维护吗？

最新版本 2\.4\.0 发布于 2025/02/26（1\.7 年前）；至今共发布 35 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/12/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。