前端国际化实战：i18next 与 react-intl 使用指南

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

总结

使用成熟的国际化库能让应用在全球范围内被正确理解。