React如何实现国际化?

小小•愿望

已于 2024-07-30 14:26:16 修改

阅读量1.2k

点赞数 1

分类专栏： react 文章标签： react.js 前端

于 2023-09-10 17:21:23 首次发布

本文链接：https://blog.csdn.net/qq_27829333/article/details/132792140

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于如何实现国际化，有很多方法，比如 vue-i18n 、 react-i18next 、 umi 中的 useIntl 等等，网上有很多的资料可以参看，今天不想使用这些库，于是乎打算自己写一个，期初设计是写两个语言文件，每次改变时把语言标识存 localStorage 中，然后刷新页面获取对应的语言文件，但是，本着提供良好的用户体验原则，否则了这一想法。于是想到了使用全局状态容器 Redux ，这样就可以在不刷新页面的情况下更新页面。尝试一下，效果还可以。以React为例，Vue实现也类似，具体代码如下：

一、Redux准备工作

为例防止文件过大，对Redux进行了拆分目录如下：

commonTypes.js

// commonTypes.js
export const SET_LANGUAGE = 'set_language'
export const SET_LANGUAGE_OBJ = 'set_language_obj'

commonActions.js

// commonActions.js
import {
  SET_LANGUAGE,
  SET_LANGUAGE_OBJ
} from '../actionTypes/commonTypes'

export const setLanguage = payload => {
  return {
    type: SET_LANGUAGE,
    payload
  }
}

export const setLanguageObj = payload => {
  return {
    type: SET_LANGUAGE_OBJ,
    payload
  }
}

commonReducer.js

// commonReducer.js
import {
  SET_LANGUAGE,
  SET_LANGUAGE_OBJ
} from '../actionTypes/commonTypes'
let lang = 'zh_CN'
if (localStorage.getItem('language') === 'zh_CN' ||
  localStorage.getItem('language') === 'en_US'
) {
  // 防止莫名出现其他值
  lang = localStorage.getItem('language')
}
const initState = {
  language: lang,
  languageObj: {}
}
const commonReducer = (state = initState, action) => {
  const { type, payload } = action
  switch (type) {
    case SET_LANGUAGE:
      return {
        ...state,
        language: payload
      }
    case SET_LANGUAGE_OBJ:
      return {
        ...state,
        languageObj: payload
      }
    default:
      return {
        ...state
      }
  }
}
 
export default commonReducer

rootReducer.js

// rootReducer.js
import commonReducer from './commonReducer'
 
const rootReducer = {
  commonStore: commonReducer
}
export default rootReducer

// index.js
import { createStore, combineReducers } from 'redux'
import rootReducer from './reducers/rootReducer'
const store = createStore(combineReducers(rootReducer))
export default store

二、然后定义SelectLang组件

样式参考的antd，目录如下：

index.js

// index.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setLanguage, setLanguageObj  } from '../../redux/actions/commonActions'
import { languageObj  } from '../../index'
 
import './index.less'
 
const SelectLang = props => {
  const language = useSelector(state => state.commonStore.language)
  const dispatch = useDispatch()
  const changeLanguage = () => {
    let lang = language === 'zh_CN' ? 'en_US' : 'zh_CN'
    localStorage.setItem('language', lang)
    dispatch(setLanguage(lang))
    dispatch(setLanguageObj(languageObj[lang]))
  }
  let selClassZH = language === 'zh_CN' ? 'acss-1nbrequ acss-1n10ay4' : 'acss-1nbrequ acss-3ew1dt'
  let selClassEN = language === 'en_US' ? 'acss-1nbrequ acss-1n10ay4' : 'acss-1nbrequ acss-3ew1dt'
  return (
    <div className="acss-llcihc" onClick={() => changeLanguage()}>
      <span className={selClassZH}>中</span>
      <span className={selClassEN}>En</span>
    </div>
  )
}
 
export default SelectLang

index.less

/* index.less */
.acss-llcihc {
  position: relative;
  cursor: pointer;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-block;
  .acss-1nbrequ {
    position: absolute;
    font-size: 1.3rem;
    line-height: 1;
    color: #ffffff;
  }
  .acss-1n10ay4 {
    left: -5%;
    top: 0;
    z-index: 1;
    color: #ffffff;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    transform-origin: 0 0;
  }
  .acss-3ew1dt {
    right: -5%;
    bottom: 0;
    z-index: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: 100% 100%;
  }
}

三、创建语言包

防止文件过大，可以按类别穿件文件，目录如下：

welcomeLocale.js

// welcomeLocale.js
module.exports = {
  welcome: 'Welcome To System'
}

index.js

// index.js

import _ from 'lodash'
// import store from '../redux'

const modulesFilesen = require.context('./en', true, /\.js$/)
const modulesen = modulesFilesen.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^.\/(.*)\.js/, '$1')
  const value = modulesFilesen(modulePath)
  modules[moduleName] = value
  return modules
}, {})

const modulesFileszh = require.context('./zh', true, /\.js$/)
const moduleszh = modulesFileszh.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^.\/(.*)\.js/, '$1')
  const value = modulesFileszh(modulePath)
  modules[moduleName] = value
  return modules
}, {})

// 动态读取文件并组合到一个对象中
export const languageObj = {
  zh_CN: moduleszh,
  en_US: modulesen
}

// 判断语言包中是否存在该字段，没有返回空
export const formatMessage = (titles, storeState) => {
  let titleList = titles.split('.')
  let resObj = _.cloneDeep(storeState)
  for (let index = 0; index < titleList.length; index++) {
    const element = titleList[index]
    if (resObj[element]) {
      resObj = resObj[element]
    } else {
      resObj = ''
    }
  }
  return resObj.toString()
}

// 或者使用这个方法
// export const formatMessageNew = (titles, storeState) => {
//   let titleList = titles.split('.')
//   let resObj = {}
//   if (storeState) {
//     resObj = _.cloneDeep(storeState)
//   } else {
//     const state = store.getState()
//     const commonStore = state.commonStore
//     resObj = _.cloneDeep(commonStore)
//   }
//   for (let index = 0; index < titleList.length; index++) {
//     const element = titleList[index]
//     if (resObj[element]) {
//       resObj = resObj[element]
//     } else {
//       resObj = ''
//     }
//   }
//   return resObj.toString()
// }

四、使用

react的入口文件

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import './index.less'
import App from './App'
import { languageObj } from './locale'
import store from './redux'
import { setLanguageObj } from './redux/actions/commonActions'
import { Provider } from 'react-redux'

const state = store.getState()
const language = state.commonStore.language
if (language === 'zh_CN') {
  store.dispatch(setLanguageObj(languageObj['zh_CN']))
}
if (language === 'en_US') {
  store.dispatch(setLanguageObj(languageObj['en_US']))
}
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
)

App.js

// App.js

import React, { useEffect, useState } from 'react'
import { Route, withRouter, Redirect } from 'react-router-dom'
import { ConfigProvider, App } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import zh_CN from 'antd/locale/zh_CN'
import en_US from 'antd/locale/en_US'
import { setLanguageObj } from './redux/actions/commonActions'
import { languageObj } from './locale'
import Welcome from './welcome'
import './App.less'
dayjs.locale('zh-cn')
 
const AppPage = () => {
  const dispatch = useDispatch()
  const [locale, setLocal] = useState({})
  const languageState = useSelector(state => state.commonStore.language)
  useEffect(() => {
    if (languageState === 'zh_CN') {
      dayjs.locale('zh-cn')
      setLocal(zh_CN)
    }
    if (languageState === 'en_US') {
      dayjs.locale('en')
      setLocal(en_US)
    }
  }, [languageState])
 
  useEffect(() => {
    dispatch(setLanguageObj(languageObj[languageState]))
  }, [locale])
  return (
    <div>
      <ConfigProvider
        locale={locale}
      >
        <App>
        <Route exact path="/" component={Welcome} />
        </App>
      </ConfigProvider>
    </div>
  )
}
 
export default withRouter(AppPage)

welcome.js

formatMessage 方法参数：

languageObj.welcomeLocale.welcome

languageObj：redux中的对象名
welcomeLocale： locale中的文件名
welcome：具体内容值

commonStore ：具体store，可在formatMessage方法优化一下，就可以不用传了，自己处理尝试吧。

// welcome.js

import React from 'react'
import { useSelector } from 'react-redux'
import { formatMessage } from '../locale'
import SelectLang from '../components/SelectLang'
const Welcome = () => {
  const commonStore = useSelector(state => state.commonStore)
  return (
    <div className="welcome">
      <SelectLang />
      <h2 className="welcome-text">{formatMessage('languageObj.welcomeLocale.welcome', commonStore)}</h2>
    </div>
  )
}
 
export default Welcome

附

如果遇到不能动态刷新，尝试可以一下 store.subscribe

import store from './redux'
store.subscribe(() => {
  const state = store.getState()
  const language = state.commonStore.language
  // ...
})

小小•愿望

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
React如何实现国际化?

React项目中手写一个国际化详细过程，采用Redux，Vue项目也可以参考，原理是一样的。
复制链接

扫一扫

专栏目录