前端国际化实现方案：React 与 i18next 最佳实践

// 使用翻译
import React from 'react';
import { useTranslation } from 'react-i18next';

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

function ItemCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('itemCount', { count })}</p>;
}

处理复数形式

// 配置复数规则
const resources = {
  en: {
    translation: {
      itemCount: 'You have {{count}} item in your cart.',
      itemCount_plural: 'You have {{count}} items in your cart.'
    }
  },
  zh: {
    translation: {
      itemCount: '您的购物车中有 {{count}} 件商品。'
    }
  }
};

// 使用复数形式
function ItemCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('itemCount', { count, plural: count !== 1 })}</p>;
}

处理日期和时间格式

// 使用 Intl.DateTimeFormat
function FormatDate({ date }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;
  return (
    <p>
      {new Intl.DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      }).format(date)}
    </p>
  );
}

处理货币格式

// 使用 Intl.NumberFormat
function FormatPrice({ price, currency = 'USD' }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;
  return (
    <p>
      {new Intl.NumberFormat(locale, {
        style: 'currency',
        currency
      }).format(price)}
    </p>
  );
}

处理 RTL 语言

// 检测并设置 RTL 样式
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { i18n } = useTranslation();
  
  useEffect(() => {
    const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
    if (rtlLanguages.includes(i18n.language)) {
      document.documentElement.dir = 'rtl';
    } else {
      document.documentElement.dir = 'ltr';
    }
    document.documentElement.lang = i18n.language;
  }, [i18n.language]);

  return <div>应用内容</div>;
}

最佳实践

1. 分离翻译文件：按语言目录存放 JSON 文件。
2. 动态加载：使用 i18next-http-backend 按需加载资源。
3. 命名空间：将不同模块的翻译拆分管理。
4. 避免过度国际化：根据目标用户范围决定实施程度。

// 配置后端加载器
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: { escapeValue: false }
  });

总结与建议

国际化是提升产品竞争力的关键，但需平衡复杂度与维护成本。避免为了国际化而过度设计，应根据实际需求选择支持的语言范围。核心目标是提高用户体验，而非炫技。确保代码可维护性，合理组织翻译资源，定期审查翻译质量，是实现高质量国际化的基础。