React

使用 i1n SDK 或 i18next / react-intl 的桥接模式将 i1n 与 React 集成。

设置

在您的 React 项目中运行 i1n init。如果存在 react-i18next 或 i18next，CLI 会自动检测并配置嵌套 JSON 格式。

您可以将 i1n SDK 用于独立模式（完全取代 i18next），也可以通过桥接模式连接它以保留您现有的库。

独立模式

使用 i1n React provider 模式可实现即插即用体验。使用 init() 初始化，创建同步 SDK 区域设置状态的 I1nProvider，并在组件中使用 useI1n() hook。

此方法通过 localStorage 提供持久的区域设置选择，通过 setLocale() 提供运行时语言切换，并通过生成的 i1n.d.ts 提供完整的类型安全自动补全——无需外部 i18n 库。

使用 i18next 的桥接模式

如果您的项目使用 i18next，只需一行代码即可连接：registerI1n((key, params) => i18next.t(key, params))。i1n 的 t() 函数现在会在后台委托给 i18next，但具有严格的类型检查和自动补全功能。

对于使用 react-intl (FormatJS) 的项目，请使用：registerI1n((key, params) => intl.formatMessage({ id: key }, params))。桥接模式可与任何翻译函数配合使用 — 将任何 (key, params) => string 回调传递给 registerI1n()。

部署

将 i1n pull 添加到您的构建步骤或 CI/CD 管道中。生成的翻译文件和 i1n.d.ts 会提交到您的存储库。

适用于 Vite、Create React App、Remix 以及任何基于 React 的框架。

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

React

设置

独立模式

使用 i18next 的桥接模式

部署

相关

仪表板

桥接模式