前端国际化实战：让应用支持多语言

1. 配置资源文件

创建 i18n.js 初始化实例，定义中英文资源映射。

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  zh: {
    translation: {
      welcome: '欢迎来到我的网站',
      description: '这是一个示例应用',
      button: '点击我',
      products: '产品列表',
      product1: '产品 1',
      product2: '产品 2',
      product3: '产品 3'
    }
  },
  en: {
    translation: {
      welcome: 'Welcome to my website',
      description: 'This is a sample application',
      button: 'Click me',
      products: 'Product List',
      product1: 'Product 1',
      product2: 'Product 2',
      product3: 'Product 3'
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'zh',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

2. 组件中使用

利用 useTranslation Hook 获取翻译函数 t。

// App.jsx
import React from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();
  
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <div>
        <button onClick={() => changeLanguage('zh')}>中文</button>
        <button onClick={() => changeLanguage('en')}>English</button>
      </div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button>{t('button')}</button>
      <div>
        <h2>{t('products')}</h2>
        <ul>
          <li>{t('product1')}</li>
          <li>{t('product2')}</li>
          <li>{t('product3')}</li>
        </ul>
      </div>
    </div>
  );
}

export default App;

3. 入口集成

确保在应用启动前加载国际化配置。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './i18n'; // 关键步骤

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

解决方案二：react-intl

如果你更倾向于使用 formatMessage 或者已有相关依赖，react-intl 也是不错的选择。它基于 Intl API，对日期和数字处理更原生。

// App.jsx
import React from 'react';
import { IntlProvider, FormattedMessage } from 'react-intl';

const zhMessages = {
  welcome: '欢迎来到我的网站',
  description: '这是一个示例应用',
  button: '点击我',
  products: '产品列表',
  product1: '产品 1',
  product2: '产品 2',
  product3: '产品 3'
};

const enMessages = {
  welcome: 'Welcome to my website',
  description: 'This is a sample application',
  button: 'Click me',
  products: 'Product List',
  product1: 'Product 1',
  product2: 'Product 2',
  product3: 'Product 3'
};

function App() {
  const [locale, setLocale] = React.useState('zh');
  const messages = locale === 'zh' ? zhMessages : enMessages;

  return (
    <IntlProvider locale={locale} messages={messages}>
      <div>
        <div>
          <button onClick={() => setLocale('zh')}>中文</button>
          <button onClick={() => setLocale('en')}>English</button>
        </div>
        <h1><FormattedMessage id="welcome" /></h1>
        <p><FormattedMessage id="description" /></p>
        <button><FormattedMessage id="button" /></button>
        <div>
          <h2><FormattedMessage id="products" /></h2>
          <ul>
            <li><FormattedMessage id="product1" /></li>
            <li><FormattedMessage id="product2" /></li>
            <li><FormattedMessage id="product3" /></li>
          </ul>
        </div>
      </div>
    </IntlProvider>
  );
}

export default App;

注意这里给 FormattedMessage 添加了 id 属性，否则不会渲染任何内容。

日期与数字格式化

国际化不仅仅是文字翻译，还包括日期、货币和数字的格式。直接使用 Intl API 即可实现。

// FormattingExample.jsx
import React from 'react';
import { useTranslation } from 'react-i18next';

function FormattingExample() {
  const { t, i18n } = useTranslation();

  const formatDate = (date) => {
    return new Intl.DateTimeFormat(i18n.language).format(date);
  };

  const formatNumber = (number) => {
    return new Intl.NumberFormat(i18n.language).format(number);
  };

  return (
    <div>
      <p>{t('currentDate')}: {formatDate(new Date())}</p>
      <p>{t('price')}: {formatNumber(12345.67)}</p>
    </div>
  );
}

export default FormattingExample;

这样就能根据当前语言环境自动显示正确的日期格式（如 MM/DD/YYYY vs YYYY/MM/DD）和千分位分隔符。

总结

选择合适的方案取决于项目规模和技术栈偏好。i18next 功能丰富且社区活跃，适合大多数场景；react-intl 则更贴近 Web 标准。无论选哪个，核心原则都是将文案抽离，避免硬编码，这样才能真正构建出面向全球的应用。