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...