使用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>
    )
相关推荐
超人不会飛7 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦10 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想12 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z21 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982426 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴32 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干35 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗37 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder42 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github