使用react-i18next切换中英文

在React中，使用react-i18next和i18next切换中英文

Store文件数据初始化

• 首先安装redux依赖包
• 通过redux对数据状态管理,通过派发changeLanguageActionCreator 来切换中英文状态

export const CHANGE_LANGUAGE = "change_language";

export const changeLanguageActionCreator = (languageCode) => {
    return {
        type: CHANGE_LANGUAGE,
        payload: languageCode
    }
}

• 数据初始化,在reducer对数据初始化，以及操作

import {CHANGE_LANGUAGE } from './languageAction'

const defaultState = {
    language:"zh",
    languageList:[
        {name:"中文",code:"zh"},
        {name:"Englist",code:"en"},
    ]
}

export default (state =defaultState,action ) => {
    console.log(action,'action')
    switch (action.type) {
        case CHANGE_LANGUAGE:
            return {
                ...state,
                language: action.payload
            }
        default:
            return state
    }
}

• store文件配置

import { createStore,combineReducers } from 'redux'

import language from './language/languageReducer'

// 创建reducer对象
const allReducer = {
    language
}

// 合并
const rootReducer  = combineReducers(allReducer)

// 创建store实例

const store = createStore(rootReducer)

export default store

• 然后在index.js文件引入,首先安装一个react-redux依赖包
• 这样在全局都可以获取到store里面的数据

import { Provider } from 'react-redux'
import store from './redux/store'
<React.StrictMode>
    <Provider store={store}>
      <App /> 
    </Provider>
  </React.StrictMode>,

配置中英文文件

• 首页安装 i18next和react-i18next两个依赖包
• zh.json文件，对中文初始化

{
    "title": "学习React",
    "home": "首页",
    "about": "关于我们",
    "more": "更多"
}

• en.json文件，对英文初始化

{
    "title": "study React",
    "home": "Home",
    "about": "About us",
    "more": "More"
}

• config.js文件配置项

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

import translation_en from "./en.json";
import translation_zh from "./zh.json";


const resources = {
    en: {
        translation: translation_en
    },
    zh: {
        translation:translation_zh
    }
}

i18n.use(initReactI18next).init({
    resources,
    lng: 'zh',
    interpolation: {
        escapeValue: false
    }
})

export default i18n

• 这样中英文文件已经配置好了，然后在index.js文件引入即可

import './i18n/config'

页面中使用

• 通过前面的配置项，然后我们在页面中就可以直接使用
• 所有的都是使用react hooks语法编写
• 通过引入react-redux中的useSelector 来获取store文件的数据。
• 通过useDispatch派发事件，把值传递给action来修改renducer中的数据
• 通过react-i18next提供的useTranslation来显示

import React from 'react'
import {BrowserRouter as Router,Link } from 'react-router-dom'
import './App.css';
import {  Typography, Menu, Dropdown } from "antd";
import { changeLanguageActionCreator } from './redux/language/languageAction'
import { useDispatch,useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'


function App() {
  const language = useSelector(state => state.language.language)
  const languageList = useSelector(state => state.language.languageList)
  const dispatch = useDispatch()
  const { t } = useTranslation()
  
  const menuClickHandler = (e) => {
    dispatch(changeLanguageActionCreator(e.key))
  }

  return (
    <div className="App">
      <Router>
        <header>
          <div>
            <Typography.Text>{t("title")}</Typography.Text>
            <Dropdown.Button
              style={{ marginLeft: 15 }}
              overlay = {
                <Menu onClick={menuClickHandler}>
                  {
                    languageList.map(l => {
                      return <Menu.Item key={l.code}>{l.name}</Menu.Item>
                    })
                  }
                </Menu>
              }
            >
              { language == 'zh' ? '中文' : 'Englist' }
            </Dropdown.Button>
          </div>
          <ul>
            <li><Link to="/">{t("home")}</Link></li>
            <li><Link to="/about">{t("about")}</Link></li>
            <li><Link to="/More">{t("more")}</Link></li>
          </ul>
          
        </header>
        <div className="container">
          内容显示区域
        </div>
      </Router>
    </div>
  );
}

export default App;

• 通过`menuClickHandler点击事件触发中英文切换，在reducer文件调用i18n提供的changeLanguage事件即可

import i18n from 'i18next'  //语言切换
export default (state =defaultState,action ) => {
    console.log(action,'action')
    switch (action.type) {
        case CHANGE_LANGUAGE:
            i18n.changeLanguage(action.payload)  //改变语言
            return {
                ...state,
                language: action.payload
            }
        default:
            return state
    }
}