React 國際化配置

2021-10-08 20:16:59 字數 2440 閱讀 8391

yarn add react-intl
練習時可以先按此目錄結構把檔案都新建好

|- src


|	|-- i18n


|	|	|-- message


|	|	|	|-- en-us.js


|	|	|	|-- zh-cn.js


|	|	|	|-- index.js


|	|	|


|	|	|-- locales.js


|	|	|-- provider.js


|	|	|-- translate.js


|	|	|-- index.js


|	|
locales.js

這個檔案用來定義常量，在本例中只有中英文

export


const


locales


=
message

這個目錄中放的是要翻譯的詞典

provider.js

import react,


from


'react'


;import


from


'react-intl'


;import


from


'@/i18n/locales'


;import message from


'./messages'


;const


provider=(


)=>


(locale=


textcomponent=


messages=


>


<


/intlprovider>


)export


default provider;
在此可以設定預設語言，本例中預設設定為英文

translate.js

import react from


'react'


;import


from


'react-intl'


;const


translate


=(id, value=


)=>


values=}/


>


export


default translate;
該檔案用於再次包裝 元件formattedmessage 第二個引數使用場景不多，詳情見官方文件

index.js

export


from


'./provider'


;export


from


'./locales'


;

import react from


"react"


;import


from


'react-router-dom'


;import


;import home from


'./pages/home'


;import


from


'react-redux'


;import


from


'./i18n'


;function


(props)


>


>


<


/router>


<


/i18nprovider>);


}const


mapstatetoprops


=(state)


=>()


export


default


connect


(mapstatetoprops,


null


);
在本專案中我把切換語言的按鈕放在了頭部導航欄中，因此我通過react-redux來控制全域性的語言

以普通文字的方式使用

import react,


from


'react'


;import


from


'react-intl'


;class


demo


extends


purecomponent


=this


.props;


return


()}<


/div>)}


}

注意

當要給 input 的 placeholder 配置國際化時一定要用最後一種方式，否則會被轉成[object object]

Spring MVC國際化配置

一 基於瀏覽器語言的國際化配置 使用spring的mvc,並且配置中有配置resource檔案 其中,message info是你的properties檔案的通用名。如 我的配置檔案叫message info.properties,message info zh cn.properties等等,只要...

django國際化環境配置

1.首先 安裝三個 必須檔案 libiconv 1.9.1.bin.woe32.zip gettext tools 0.17.zip gettext runtime 0.18.1.1 2 win32.zip 將環境變數path中配置bin目錄 2.建立工程，在工程根下新建locale資料夾 執行命令...

spring中配置國際化

先寫好幾個.properties的資源檔案放在classpath下，當然可以放在src下面 我寫了兩個 format.properties 內容 testmsg hello world exception.properties run runtimeexception null nullpointe...