React中多語言的配置方式

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

這篇文章主要介紹了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中可以根據(jù)當前語言字符串選擇給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中數(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 導出了對應的鉤子里來訪問intl實例。

其中intl是一個方法可以傳入JSON配置來達到想要的效果：這里簡單的配置了id ：經(jīng)過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都比較簡介。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React轉Vue3的避坑指南
從 React 轉 Vue3,相信很多前端工程師都有過這個經(jīng)歷,本文專門針對 React 開發(fā)者視角,對照講解 Vue3 的核心概念,幫助你快速建立 Vue3 思維模型,少走彎路,需要的朋友可以參考下
2026-04-04
React中綁定this并給函數(shù)傳參的三種方式
React中定義一個組件,可以通過ES6版本以前的React.createClass或者ES6的class xxx extends React.Component,綁定this是react中非常重要的一部分,React中,綁定this的方式有多種,下面一一看看怎么進行this綁定并給函數(shù)傳參,需要的朋友可以參考下
2025-07-07
React RenderProps模式運用過程淺析
render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術。簡單來說，給一個組件傳入一個prop，這個props是一個函數(shù)，函數(shù)的作用是用來告訴這個組件需要渲染什么內容，那么這個prop就成為render prop
2023-03-03
基于React Native 0.52實現(xiàn)輪播圖效果
這篇文章主要為大家詳細介紹了基于React Native 0.52實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
React中的for循環(huán)解讀
這篇文章主要介紹了React中的for循環(huán)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
React之防止按鈕多次點擊事件?重復提交
這篇文章主要介紹了React之防止按鈕多次點擊事件?重復提交問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
react實現(xiàn)動態(tài)增減表單項的示例代碼
在做項目的時候,甲方給的信息有限,網(wǎng)頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧
2024-05-05
react中使用antd及immutable示例詳解
這篇文章主要為大家介紹了react中使用antd及immutable示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
React如何實現(xiàn)像Vue一樣將css和js寫在同一文件
這篇文章主要介紹了React如何實現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
淺談從React渲染流程分析Diff算法
這篇文章主要介紹了淺談從React渲染流程分析Diff算法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09