最近用react做了多語言功能
在此分享下使用的筆記
我是用react-18next來實作多語言功能 另外搭配免費的oneSky來做雲端翻譯管理
1.入門 顯示翻譯值
目標就是要讓網頁用翻譯的值取代翻譯的key
class jsx:
import React, { Component } from 'react'
import { translate } from 'react-i18next'
@translate(['user', 'common'])
class MyItem extends Component {
const { t } = this.props
return
<div>
{t('common:key1'}
</div>
}
export default MyItem
translate json:
{
"key1":"翻譯的文字"
}
如此就會顯示
<div>
翻譯的文字
</div>
-------
2.帶入參數 像是顯示人名
翻譯的文字有時候會帶入參數, 像是人名 地點...
variable:
translate json:
{
"I am":"我是{{name}}"
}
jsx:
const UserName = 'jojo'
<div>
{t('common:I am', { name: UserName })}
</div>
就會顯示
<div>
我是jojo
</div>
-------
3. 單複數
plural:
translate json:
{
"dayCount":"{{count}} day",
"dayCount_plural":"{{count}} days",
}
jsx:
const daysVariable = 3
<div>
{t('common:dayCount', { count: daysVariable } }
</div>
就會顯示
<div>
3 days
</div>
不需要由前端來判斷是單數還是複數 很方便
不過有時候接到的數字可能是字串形式 ("3")
jsx就要改寫為
{t('common:dayCount', { count: Number(daysVariable) } }
來轉型,
另外！！
count 是套件的內定字元 如果variable改成其他字就不會自動判斷了
我之前就用amount來傳數量參數 都沒有反應(當然...) 然後弄了半小時才搞懂這個規則
---------
4.插入html tag
Interpolate:
類似variable, 用於帶入htmltag到翻譯中的時候
例如 斷行符號<br/>
例如
<span>
早睡早起<br/>
身體好
</span>
json:
{
"sleep early":"早睡早起{{br}}身體好"
}
jsx:
import { translate, Interpolate } from 'react-i18next'
<span>
<Interpolate i18nKey="common:sleep early"
br={<br/>} />
</span>
就會出現
<span>
早睡早起
身體好
</span>
---------
5.巢狀的翻譯
Nested 巢狀:
在翻譯中帶入已經有的翻譯
例如：
A路線需時3天,B路線需時1天
Route A would take 3 days, Route B would take 1 day.
json:
{
"Route take":"Route A would take $t(common:dayCount, {\"count\": {{Adays}} }), Route B would take $t(common:dayCount, {\"count\": {{Bdays}} }).",
"dayCount":"{{count}} day",
"dayCount_plural":"{{count}} days"
}
jsx:
<span>
{t('common:Route take', { Adays: daysA_variable, Bdays: daysB_variable })}
</span>
就會出現
<span>
Route A would take 3 days, Route B would take 1 day.
</span>
----------
6.在interpolate 中帶入其他翻譯值
例如
<p>
今天天氣<strong>非常</strong>好
</p>
<p>
The weather is <strong>very</strong> good
</p>
裡面的<strong>要獨立出來的同時還要帶入另一個翻譯值very
json:
{
"weather today":"今天天氣{{adj}}好",
"very":"非常"
}
jsx:
import { translate, Interpolate } from 'react-i18next'
<p>
<Interpolate i18nKey="common:weather today"
adj={<strong>{t('common:very')}</strong>} />
</p>
就會出現
<p>
The weather is very good
</p>
以上, 做個紀錄分享
另外還有oneSky的使用心得 還有i18next的 preload再找時間寫好了
共勉之～
留言列表
