React中多語言的配置方式

更新時間：2023年06月07日 09:05:56 作者：shuuy

這篇文章主要介紹了React中多語言的配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

React中多語言的配置

使用React-intl 插件來實現(xiàn)全局的多語言控制。

通過配置JSON key value鍵值對的形式來實現(xiàn)適應(yīng)多語言需求。

第一步

安裝多語言插件： react-intl

npm i react-intl

react-intl 文檔地址：鏈接

第二步

準備配置工作。

安裝完成以后可以在項目的根目錄中建立一個locales文件夾來存放對應(yīng)的語言包(其實就是一些key value鍵值對。)

然后建立兩個文件夾：分別放置導(dǎo)出的語言配置：我本人的目錄結(jié)構(gòu)如下：

首先是兩個語言包文件夾：分別導(dǎo)出index.ts文件夾，后續(xù)如果業(yè)務(wù)有需要可以分別在各自文件夾中建立文件然后在index.ts文件中導(dǎo)入。

以應(yīng)對后續(xù)業(yè)務(wù)較復(fù)雜語言包較多的情況。

en-US.ts 和 zh-CN.ts 兩個文件導(dǎo)出了相關(guān)的配置。

這里導(dǎo)出的中文的配置如下：

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中拿到官方導(dǎo)出的組件語言包，供以后組件中使用。

message主要就是自己定義的鍵值對，locale是語言的標識。然后后續(xù)組件就可以引入配置來配置多語言了。

第三步

引入react-intl 中的組件進行配置。

在項目中的APP.tsx文件中進行導(dǎo)入。這里盡量在根節(jié)點導(dǎo)入，就像Context的使用方式差不多，在根節(jié)點注入以后，子組件中就可以使用。

在項目中導(dǎo)入Provider

import { IntlProvider } from 'react-intl';

導(dǎo)入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 導(dǎo)出的Provider，locale是對應(yīng)的語言標識字符串，message對應(yīng)的語言key\value 鍵值對。
ConfigProvider 是antd 導(dǎo)出的Proverder, locale 需要導(dǎo)入antd 導(dǎo)出的語言包。

第四步

在系統(tǒng)中維護一個字符串來標識當(dāng)前的語言，可以選擇在Redux中進行維護，在App.tsx中可以根據(jù)當(dāng)前語言字符串選擇給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
    }
}
//導(dǎo)出store modal/index.tsx
const store = createStore(
    reducers,
    applyMiddleware(thunk)
)
export default store;

在根節(jié)點通過Provider來注入store

//導(dǎo)入store
import { Provider } from 'react-redux';
import store from './modal'
//使用Provider
ReactDOM.render(
  <Provider store={store}>
    <RouterAll/>,
  </Provider>,
  document.getElementById('root')
);

因為我這邊想盡可能保持redux中數(shù)據(jù)的純凈，和reducer的純函數(shù)的特性，所以只存入了字符串作為標識，所以需要在App.tsx中給多語言組件注入不同的值。

由于App.tsx中是用的react hook的方式來書寫的，所以使用reducer提供的useSelector 來讀取store的數(shù)據(jù)，根據(jù)標識注入不同的多語言數(shù)據(jù)。

實現(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>
    </>
  )
}

這個時候多語言的整體已經(jīng)部署完畢了，接下來就是在后面的頁面中進行多語言配置。

最后一步在子頁面中使用多語言：這里分兩步介紹: 分別為hook和Class組件。

hook 組件中 React-intl 導(dǎo)出了對應(yīng)的鉤子里來訪問intl實例。

其中intl是一個方法可以傳入JSON配置來達到想要的效果：這里簡單的配置了id ：經(jīng)過intl執(zhí)行以后就會拿到對應(yīng)中英文配置的對應(yīng)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 組件中則是需要導(dǎo)入一個組件來實現(xiàn)：通過組件中傳入對應(yīng)的屬性，就可以渲染出對應(yīng)的值。

使用如下：

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);

簡單的使用場景截圖：