在 React 应用程序中构建国际化：可扩展本地化综合指南-js教程-PHP中文网

在 React 应用程序中构建国际化：可扩展本地化综合指南

花韻仙語

发布： 2025-01-01 10:21:42

原创

423人浏览过

在 react 应用程序中构建国际化：可扩展本地化综合指南

引言

过去三个月，我一直在独立开发一个大型SaaS项目。虽然过程令人兴奋，但也充满挑战。最近两周，我的首要任务是在保证质量的同时交付高优先级的功能。

其中一个关键决策是是否集成国际化（i18n）以支持多种语言。最初，我倾向于先发布纯英文版本，之后再使用机器翻译（MT）进行本地化。然而，作为单人团队，我目前选择专注于一个高利润的市场。

虽然对我的项目来说国际化是可选的，但在专业环境中，由于法律法规的要求，国际化至关重要。这篇博文将探讨如何设计一个可扩展、高效的i18n架构，避免高复杂度或结构混乱等陷阱，这些经验对于独立开发者和团队都大有裨益。

由于我决定在我的项目中不实现i18n，我分享这份指南来帮助其他人（以及未来的我！）。

目标

一个优秀的国际化系统应该：

可扩展性: 支持跨团队无缝协作进行翻译和语言更新。
模块化: 保持简洁的结构，易于扩展，无需额外开销。
可预测性: 遵循一致、可执行的本地化模式。
易用性: 适合不同技能水平的开发者使用。

可用工具

对于JavaScript的国际化，以下是一些常用的工具：

i18next: 一个成熟、功能强大的库，非常适合可扩展的专业级本地化。
其他方案: formatjs、polyglot.js、linguijs、globalizejs、Mozilla的Fluent。

每个工具都有其优缺点。为简便起见，本指南重点介绍i18next。

架构设计

国际化文件夹结构

架构的核心是i18n文件夹，包含三个关键组件：

translations文件夹: 存储每种语言的JSON文件（例如en.json、ar.json、zh.json）以及新语言的base.json模板。
index.js: 配置和初始化i18n库（例如i18next），设置默认语言和其他选项。
keys.js: 定义翻译键的集中式结构，确保一致性并避免重复。

文件夹结构示例：

<code>src/
├── i18n/
│   ├── translations/
│   │   ├── en.json       # 英文翻译
│   │   ├── ar.json       # 阿拉伯语翻译
│   │   ├── zh.json       # 中文翻译
│   │   └── base.json     # 新语言模板
│   ├── index.js          # i18n配置
│   └── keys.js           # 一致性键的集中式定义</code>

登录后复制

keys.js 作为中心枢纽

keys.js文件反映项目的结构，按功能或模块对键进行分组。这种结构使密钥管理直观且可扩展。

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

keys.js示例：

<code class="javascript">const keys = {
  components: {
    featurea: {
      buttontext: "components.featurea.buttontext",
      label: "components.featurea.label",
    },
    featureb: {
      header: "components.featureb.header",
    },
  },
};

export default keys;</code>

登录后复制

翻译文件

翻译JSON文件与keys.js中的结构保持一致，确保一致性。

en.json示例：

<code class="json">{
  "components": {
    "featurea": {
      "buttontext": "Submit",
      "label": "Enter your name"
    },
    "featureb": {
      "header": "Welcome to feature b"
    }
  }
}</code>

登录后复制

ar.json示例：

<code class="json">{
  "components": {
    "featurea": {
      "buttontext": "إرسال",
      "label": "أدخل اسمك"
    },
    "featureb": {
      "header": "مرحبًا بكم في الميزة ب"
    }
  }
}</code>

登录后复制

配置 i18next

安装i18next及其React集成：

<code class="bash">npm install i18next react-i18next</code>

登录后复制

i18n/index.js:

<code class="javascript">import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./translations/en.json";
import ar from "./translations/ar.json";

i18n
  .use(initReactI18next)
  .init({
    resources: { en: { translation: en }, ar: { translation: ar } },
    lng: "en", // 默认语言
    fallbackLng: "en",
    interpolation: { escapeValue: false }, // React处理转义
  });

export default i18n;</code>

登录后复制

将 i18n 集成到组件中

组件示例（功能a）：

<code class="javascript">import React from "react";
import { useTranslation } from "react-i18next";
import keys from "../../i18n/keys";

const FeatureA = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>Feature A</h2>
      <button>{t(keys.components.featurea.buttontext)}</button>
      <label>{t(keys.components.featurea.label)}</label>
    </div>
  );
};

export default FeatureA;</code>

登录后复制

添加语言切换器

语言切换器允许用户在不同语言之间切换。

LanguageSwitcher.jsx:

<code class="javascript">import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ar")}>العربية</button>
    </div>
  );
};

export default LanguageSwitcher;</code>

登录后复制

最终文件夹结构

<code>src/
├── components/
│   ├── FeatureA/
│   │   ├── index.jsx
│   │   └── FeatureAStyles.css
│   └── shared/
│       └── LanguageSwitcher.jsx
├── i18n/
│   ├── translations/
│   │   ├── en.json
│   │   ├── ar.json
│   │   └── base.json
│   ├── keys.js
│   └── index.js
├── App.jsx
└── index.js</code>

登录后复制

进阶