使用Tailwind CSS和i18n的react实践

首先在 src 下设置 i18n.js 文件

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

import en from './locales/en/public';
import zh from './locales/zh/public';

i18n
  .use(initReactI18next)  
  .init({
    resources: {
      en: { translation: en },//翻译文本
      zh: { translation: zh },
    },
    lng: 'zh',  
    fallbackLng: 'en', // When no lang
    interpolation: {
      escapeValue: false, // React avoid XSS
    },
  });

export default i18n;

然后再主文件引入文件

import RouterGuard from './common/components/router-wrapper/RouterGuard'
import { Router } from './routes/router/RouterRender'
import routesConfig from './routes'
import { BrowserRouter } from 'react-router-dom'
import 'antd/dist/reset.css'
import './index.css'
import './i18n' // 引入
function App() {
  return (
    <BrowserRouter>
      <RouterGuard>
        <Router routes={routesConfig} />
      </RouterGuard>
    </BrowserRouter>
  )
}
export default App

最后直接使用就行

import { message } from 'antd';
import './index.scss'
import { useTranslation } from 'react-i18next';
const DataCard = () => {
  const { t, i18n } = useTranslation();
  const toggleLanguage = () => {
    const newLang = i18n.language === 'zh' ? 'en' : 'zh';
    i18n.changeLanguage(newLang);
  };
   return (
    <div>
        <div style={{ padding: 20 }}>
          <h1 className="text-3xl font-bold mb-4">{t('currentName')}</h1>
          <button className="bg-blue-400 hover:bg-blue-200 text-white font-bold py-2 px-3 rounded transition duration-100" 
          onClick={toggleLanguage}>
            {t('check')}
          </button>
          <div className="buttons mt-6">
            <button className="bg-red-400 hover:bg-red-200 text-white font-bold py-2 px-4 rounded transition duration-100 mr-2" 
            onClick={() => message.success(t('successfullyDeleted'))}>
              {t('delete')}
            </button >
            <button className="bg-yellow-400 hover:bg-yellow-200 text-white font-bold py-2 px-4 rounded transition duration-100 mr-2" 
            onClick={() => message.success(t('successfulOperation'))}>
              {t('edit')}
            </button>
            <button className="bg-green-400 hover:bg-green-200 text-white font-bold py-2 px-4 rounded transition duration-100"  onClick={() => message.success(t('successfulOperation'))}>
              {t('create')}
            </button>
          </div>
        </div>
      </div>
    )