React中多語言的配置方式
React中多語言的配置
使用React-intl 插件來實現(xiàn)全局的多語言控制。
通過配置JSON key value鍵值對的形式來實現(xiàn)適應多語言需求。
第一步
安裝多語言插件： react-intl
npm i react-intl
react-intl 文檔地址：鏈接
第二步
準備配置工作。
安裝完成以后可以在項目的根目錄中建立一個locales文件夾來存放對應的語言包(其實就是一些key value鍵值對。)
然后建立兩個文件夾：分別放置導出的語言配置：我本人的目錄結構如下：
首先是兩個語言包文件夾： 分別導出index.ts文件夾，后續(xù)如果業(yè)務有需要可以分別在各自文件夾中建立文件然后在index.ts文件中導入。
以應對后續(xù)業(yè)務較復雜語言包較多的情況。
en-US.ts 和 zh-CN.ts 兩個文件導出了相關的配置。
這里導出的中文的配置如下：
import message from './zh-CN.message';
import zhCN from 'antd/es/locale/zh_CN';
const zh_CN = {
message,
antd: zhCN,
locale: 'zh-CN',
} as {
message: any,
antd:any,
locale: 'zh-CN' | 'en-US'
}
export default zh_CN因為項目中使用的是React框架，UI組件使用的是antd，antd官方也給出了UI組件的多語言配置所以這里直接從antd中拿到官方導出的組件語言包，供以后組件中使用。
message主要就是自己定義的鍵值對，locale是語言的標識。然后后續(xù)組件就可以引入配置來配置多語言了。
第三步
引入react-intl 中的組件進行配置。
在項目中的APP.tsx文件中進行導入。這里盡量在根節(jié)點導入，就像Context的使用方式差不多，在根節(jié)點注入以后，子組件中就可以使用。
在項目中導入Provider
import { IntlProvider } from 'react-intl';導入antd組件的多語言組件:
import { ConfigProvider } from 'antd';在根節(jié)點中包裹子組件。盡量在路由組件上方使用。
interface IProps extends RouteComponentProps<any,any>{
children: React.ReactNode
}
cosnt App:React.FC<IProps> = (props:IProps) => {
return(
<>
<IntlProvider locale={localType.locale} messages={localType.message}>
{/* antd中多語言配置 */}
<ConfigProvider locale={localType.antd}>
<section className="App">
{props.children}
</section>
</ConfigProvider>
</IntlProvider>
</>
)
}IntlProvider是react-intl 導出的Provider，locale是對應的語言標識字符串，message對應的語言key\value 鍵值對。ConfigProvider是antd 導出的Proverder, locale 需要導入antd 導出的語言包。
第四步
在系統(tǒng)中維護一個字符串來標識當前的語言，可以選擇在Redux中進行維護，在App.tsx中可以根據當前語言字符串選擇給IntlProvider和ConfigProvider 賦值不同的配置。
在state.ts中定義初始 state
const store:storeType = {
localLanguage: 'en-US'
}然后開始寫reducer 和 action
//reducer: modal/reducer/index.tsx
const localLanguage = (state = store.localLanguage,action:actionType) => {
switch(action.type) {
case actionType.CHANGE_LANGUAGE:
return action.data;
default:
return state;
}
}
//action: modal/acton/index.tsx
export const changeLanguage = (value: 'en-US'| 'zh-CN') => {
return {
type: storeType.CHANGE_LANGUAGE,
data: value
}
}
//導出store modal/index.tsx
const store = createStore(
reducers,
applyMiddleware(thunk)
)
export default store;在根節(jié)點通過Provider來注入store
//導入store
import { Provider } from 'react-redux';
import store from './modal'
//使用Provider
ReactDOM.render(
<Provider store={store}>
<RouterAll/>,
</Provider>,
document.getElementById('root')
);因為我這邊想盡可能保持redux中數據的純凈，和reducer的純函數的特性，所以只存入了字符串作為標識，所以需要在App.tsx中給多語言組件注入不同的值。
由于App.tsx中是用的react hook的方式來書寫的，所以使用reducer提供的useSelector 來讀取store的數據，根據標識注入不同的多語言數據。
實現(xiàn)代碼如下：
import {useSelector} from 'react-redux';
import { RouteComponentProps } from 'react-router-dom'
import enUS from './locales/en-US'
import zhCN from './locales/zh-CN'
interface IProps extends RouteComponentProps<any,any>{
children: React.ReactNode
}
const App:React.FC<IProps> = (props:IProps) => {
const localLanguage = useSelector((state:storeType) => state.localLanguage)
const [localType,setLocalType] = useState(enUS);
useEffect(() => {
setLocalType(localLanguage == 'en-US'? enUS: zhCN);
},[localLanguage])
return (
<>
{/* 多語言配置 */}
<IntlProvider locale={localType.locale} messages={localType.message}>
{/* antd中多語言配置 */}
<ConfigProvider locale={localType.antd}>
<section className="App">
{props.children}
</section>
</ConfigProvider>
</IntlProvider>
</>
)
}這個時候多語言的整體已經部署完畢了，接下來就是在后面的頁面中進行多語言配置。
最后一步在子頁面中使用多語言：這里分兩步介紹: 分別為hook和Class組件。
hook 組件中 React-intl 導出了對應的鉤子里 來訪問intl實例。
其中intl是一個方法可以傳入JSON配置來達到想要的效果：這里簡單的配置了id ： 經過intl執(zhí)行以后就會拿到對應中英文配置的對應key的value
import React, { useState } from 'react';
import { useIntl } from 'react-intl';
import { useSelector, useDispatch } from 'react-redux'
import { storeType } from '../../modal/state'
import { changeLanguage } from '../../modal/actions'
import { Button } from 'antd';
const TestLanguage: React.FC = () => {
const { formatMessage: intl } = useIntl();
const state = useSelector((state: storeType) => state);
const dispatch = useDispatch();
const changeLanguageEvent = () => {
dispatch(changeLanguage(state.localLanguage === 'en-US' ? 'zh-CN' : 'en-US'))
}
return (
<>
<span>{intl({ id: 'login' })}</span>
語言：{state.localLanguage}
<hr />
<Button type="primary" onClick={changeLanguageEvent}>{intl({ id: 'testButton' })}</Button>
</>
)
}
export default TestLanguage;在class 組件中則是需要導入一個組件來實現(xiàn)： 通過組件中傳入對應的屬性，就可以渲染出對應的值。
使用如下：
import React, { Component,PureComponent } from 'react';
import { connect } from 'react-redux'
import { changeLanguage } from '../../modal/actions'
import { RouteComponentProps } from 'react-router-dom'
import { Button } from 'antd';
import { FormattedMessage } from 'react-intl';
import { storeType } from '../../modal/state'
interface IProps {
localLanguage: 'en-US' | 'zh-CN';
dispatch: Function
}
class TestLanguageClass extends PureComponent<IProps & RouteComponentProps<any,any>, {}> {
constructor(props: IProps & RouteComponentProps<any,any>) {
super(props);
this.state = {
}
}
private buttonClick = () => {
const { localLanguage } = this.props;
this.props.dispatch(changeLanguage(localLanguage === 'en-US' ? 'zh-CN' : 'en-US'));
}
render() {
const { localLanguage } = this.props;
return (
<>
<div>
語言：{localLanguage}
<hr />
<Button onClick={this.buttonClick}><FormattedMessage
id="testButton"
/></Button>
</div>
</>
)
}
}
export default connect(
(state: storeType) => ({ localLanguage: state.localLanguage }),
dispatch => ({ dispatch }))(TestLanguageClass);簡單的使用場景截圖：
可以看出class組件與hook組件相比，不論在使用 redux 或者是使用多語言，hook都比較簡介。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
聊聊ant?design?charts?獲取后端接口數據展示問題
今天在做項目的時候遇到幾個讓我很頭疼的問題，一個是通過后端接口成功訪問并又返回數據，但拿不到數據值。其二是直接修改state中的data，console中數組發(fā)生變化但任然數據未顯示，這篇文章主要介紹了ant?design?charts?獲取后端接口數據展示,需要的朋友可以參考下2022-05-05
React?Router?v6?的路由懶加載有2種實現(xiàn)方式,1是使用react-router自帶的?route.lazy,2是使用React自帶的?React.lazy,下面我們就來看看它們的具體實現(xiàn)方法吧2024-04-04
這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了React.js前端導出Excel的方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了使用hooks寫React組件需要注意的5個地方，幫助大家更好的理解和學習使用React組件，感興趣的朋友可以了解下2021-04-04
React+ResizeObserver實現(xiàn)自適應ECharts圖表
ResizeObserver是JavaScript的一個API,用于監(jiān)測元素的大小變化,本文主要為大家介紹了React如何利用ResizeObserver實現(xiàn)自適應ECharts圖表,需要的可以參考下2024-01-01
ReactiveCocoa代碼實踐之-UI組件的RAC信號操作
這篇文章主要介紹了ReactiveCocoa代碼實踐之-UI組件的RAC信號操作 的相關資料,需要的朋友可以參考下2016-04-04
react antd-mobile ActionSheet+tag實現(xiàn)多選方式
這篇文章主要介紹了react antd-mobile ActionSheet+tag實現(xiàn)多選方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
高階組件就是接受一個組件作為參數并返回一個新組件（功能增強的組件）的函數。這里需要注意高階組件是一個函數，并不是組件，這一點一定要注意，本文給大家分享React高階組件使用小結，一起看看吧2022-08-08
React-router中結合webpack實現(xiàn)按需加載實例
本篇文章主要介紹了React-router中結合webpack實現(xiàn)按需加載實例，非常具有實用價值，需要的朋友可以參考下2017-05-05