欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react之umi配置國際化語言locale的踩坑記錄

 更新時間:2023年02月10日 15:20:44   作者:weixin_39788999  
這篇文章主要介紹了react之umi配置國際化語言locale的踩坑記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

umi配置國際化語言locale的踩坑

因為項目創(chuàng)建的比較早,用的是umi2+版本,修改默認(rèn)語言是英文,官方說直接改配置的defalut,但是我改完并不生效,可能是我的版本呢原因,找了好久,總算找到解決辦法的方法了。

其中我的項目版本使用的umi和國際化插件如下:

"umi": "^2.4.4",
 "umi-plugin-react": "^1.7.2"

1 修改默認(rèn)顯示語言,方法如下

2 再在app.js加入一下代碼

小小的問題,可能是版本的原因,嘗試了好久,也是挺折騰人的…

react-umi 國際化 (中英文切換)

.umirc.js國際化默認(rèn)配置

export default {
? plugins: [
? ? [
? ? ? 'umi-plugin-react',
? ? ? {
? ? ? ? locale: {
? ? ? ? ? default: 'zh-CN', //默認(rèn)語言 zh-CN
? ? ? ? ? baseNavigator: true, // 為true時,用navigator.language的值作為默認(rèn)語言
? ? ? ? ? antd: true // 是否啟用antd的<LocaleProvider />
? ? ? ? }
? ? ? }
? ? ]
? ]
};

目錄及約定

```javascript
├── dist/ ? ? ? ? ? ? ? ? ? ? ? ? ?
├── mock/ ? ? ? ? ? ? ? ? ? ? ? ??
└── src/ ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ├── layouts/index.js ? ? ? ? ?
? ? ├── pages/ ? ? ? ? ? ? ? ? ? ?
? ? └── locales ? ? ? ? ? ? ? // 多語言文件存放目錄,里面的文件會被umi自動讀取
? ? ? ? ├── zh-CN.js
? ? ? ? └── en-US.js ? ? ? ? ? ? ??
├── .umirc.js ? ? ? ? ? ? ? ? ? ??
├── .env ? ? ? ? ? ? ? ? ? ? ? ? ?
└── package.json
多語言文件約定
多語言文件的命名規(guī)范:-.js

多語言文件的內(nèi)容規(guī)范:鍵-值組成的字面量,如下:

zh-CN.js

zh-CN.js

export default {
? WELCOME_TO_UMI_WORLD: '{name},歡迎光臨umi的世界',
}

en-US.js`

export default {//前面即ID,后面顯示的內(nèi)容
? WELCOME_TO_UMI_WORLD: '{name}, welcome to umi\'s world',
}

使用

import { formatMessage, setLocale, getLocale, FormattedMessage } from 'umi/locale'
//setLocale('en-US') 設(shè)置默認(rèn)
//getLocale 獲取當(dāng)前語言
//setLocale 切換語言傳參文件夾名字
//FormattedMessage 通過id渲染
//標(biāo)簽---主要

// 設(shè)置為 en-US
setLocale('en-US')

// 獲取當(dāng)前語言
console.log(getLocale() === 'en-US')
//使用標(biāo)簽 此處id為en-us文件夾和zh-cn文件夾的id, id后面的內(nèi)容會自動顯示到標(biāo)簽上
<FormattedMessage id="WELCOME_TO_UMI_WORLD" }/>
//------次要了解
// 獲取指定文字的多語言版本
const formatedText = formatMessage({
? id: 'WELCOME_TO_UMI_WORLD'
}, {
? name: '小伙子',
})

console.log(formatedText === '小伙子,歡迎光臨umi的世界')
// 渲染一個文字標(biāo)簽
function Example() {
? return <FormattedMessage id="WELCOME_TO_UMI_WORLD" values={{ name: '小伙子' }} />
}

總結(jié)

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

相關(guān)文章

  • React路由的history對象的插件history的使用解讀

    React路由的history對象的插件history的使用解讀

    這篇文章主要介紹了React路由的history對象的插件history的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React-Native中props具體使用詳解

    React-Native中props具體使用詳解

    本篇文章主要介紹了React-Native中props具體使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • React從Class方式轉(zhuǎn)Hooks詳解

    React從Class方式轉(zhuǎn)Hooks詳解

    這篇文章主要介紹了React從Class方式轉(zhuǎn)Hooks詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-09-09
  • 詳解React-Todos入門例子

    詳解React-Todos入門例子

    本篇文章主要介紹了React-Todos入門例子,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例

    React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例

    這篇文章主要為大家介紹了React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • React router cache route實(shí)現(xiàn)緩存頁面流程介紹

    React router cache route實(shí)現(xiàn)緩存頁面流程介紹

    react-router自身沒有路由緩存的特性,在5.x版本之前,我們可以基于react-router-cache-route來實(shí)現(xiàn)路由緩存功能。但是react-router 6.x在實(shí)現(xiàn)上做了比較大的變化,react-router-cache-route沒有提供相應(yīng)的支持
    2023-01-01
  • React-Native 環(huán)境搭建和基本介紹

    React-Native 環(huán)境搭建和基本介紹

    這篇文章主要介紹了React-Native 環(huán)境搭建和基本介紹的相關(guān)資料,包括react native優(yōu)缺點(diǎn),通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2021-04-04
  • React?Hook之使用State?Hook的方法

    React?Hook之使用State?Hook的方法

    這篇文章主要為大家詳細(xì)介紹了React使用State?Hook的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • 詳解如何在React中監(jiān)聽鼠標(biāo)事件

    詳解如何在React中監(jiān)聽鼠標(biāo)事件

    React可以通過使用React事件系統(tǒng)來監(jiān)聽鼠標(biāo)事件,您可以在React組件中通過使用特定的事件處理函數(shù)來注冊和處理鼠標(biāo)事件,本文小編講給大家詳細(xì)介紹一下如何在React中監(jiān)聽鼠標(biāo)事件,需要的朋友可以參考下
    2023-09-09
  • React css-in-js基礎(chǔ)介紹與應(yīng)用

    React css-in-js基礎(chǔ)介紹與應(yīng)用

    隨著React、Vue等支持組件化的MVVM前端框架越來越流行,在js中直接編寫css的技術(shù)方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢,下面帶你了解它
    2022-09-09

最新評論