使用Tailwind CSS和i18n的react实践

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

TypeScript 复制代码
// 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;

然后再主文件引入文件

TypeScript 复制代码
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

最后直接使用就行

TypeScript 复制代码
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>
    )
相关推荐
大模型真好玩14 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫38 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler2811 小时前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺1 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化