前端国际化实战：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

// 配置
// 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;

// 使用
// 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;

// 入口文件
// 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

// 配置
// 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;

通过上述方案，可以让应用在全球范围内被理解，提升用户体验。