前端国际化实战：i18next 与 react-intl 配置指南

前端国际化实战：i18next 与 react-intl 配置指南

背景

如果应用仅支持单一语言，将难以拓展海外市场。

对于前端开发者而言，构建支持多语言的应用是全球化产品的必要步骤。硬编码文本会导致维护困难且无法扩展。

为什么需要国际化

最近看到一个项目想拓展海外市场，但所有文本都是硬编码在代码里。这限制了应用的适用范围。

硬编码的问题

// 反面教材：硬编码文本
function App() {
  return (
    <div>
      <h1>欢迎来到我的网站</h1>
      <p>这是一个示例应用</p>
      <button>点击我</button>
      <div>
        <h2>产品列表</h2>
        <ul>
          <li>产品 1</li>
          <li>产品 2</li>
          <li>产品 3</li>
        </ul>
      </div>
    </div>
  );
}
export default App;

问题分析： 这种硬编码方式导致维护困难且无法扩展。

推荐方案

1. i18next

// 正确姿势：i18next
// 1. 配置
// 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. 使用
// 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')
);

2. react-intl

// 正确姿势：react-intl
// 1. 配置
// 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;

3. 日期和数字格式化

// 正确姿势：日期和数字格式化
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;

总结： 通过上述方案，可实现应用的全球化支持，让应用在全球范围内都能被理解。