建站
咨詢
售后
建站咨詢
新聞中心
成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),原陽(yáng)網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:原陽(yáng)等地區(qū)。原陽(yáng)做網(wǎng)站價(jià)格咨詢:18982081108
本文講解如何使用 React-Intl 庫(kù)給你的 React 應(yīng)用做國(guó)際化。
安裝
React 項(xiàng)目默認(rèn)你已經(jīng)搭建好了?？梢杂眠^氣的 CRA，流行的 vite，或者用 React 推薦的 Next.js。
安裝 React-Intl。
npm i -S react-intl
或者用 yarn。
yarn add react-intl
使用
接著我們需要將國(guó)際化能力注入到 React 應(yīng)用中。
使用的是經(jīng)典的 context 上下文方案：
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(
);
IntlProvider 是一個(gè) context.provider 組件，用來(lái)注入一些國(guó)際化需要的信息。其中最重要的信息是 locale 和 messages。
locale 是一個(gè)字符串，代表一個(gè)語(yǔ)言標(biāo)識(shí)，使用了 BCP 47 語(yǔ)言標(biāo)記規(guī)范。比如中文用 ??zh???，英文用 ??en???，簡(jiǎn)體用 ??zh-CN??。
標(biāo)識(shí)符是會(huì)提供給瀏覽器自帶的 Intl 對(duì)象使用的，Intl 對(duì)象的方法會(huì)通過它確定如何做轉(zhuǎn)換，比如不同國(guó)家數(shù)字的分隔符是不同的。
可以看到，原點(diǎn)、逗號(hào)、空格，什么都有。所以你要傳一個(gè)正確的語(yǔ)言標(biāo)識(shí)符。
messages 就簡(jiǎn)單多了，就是一個(gè) id 到 value 的映射，組件中傳一個(gè) id，就能拿到對(duì)應(yīng)的語(yǔ)言文案了。比如
const zh = {
'command.undo': '撤銷',
'command.redo': '重做',
'arrange.forward': '上移一層',
'arrange.backward': '下移一層',
'arrange.front': '移到頂部',
'arrange.back': '移到底部',
'zoom.zoomIn': '放大',
'zoom.zoomOut': '縮小'
};
const en = {
'command.undo': 'Undo',
'command.redo': 'Redo',
'arrange.forward': 'Forward',
'arrange.backward': 'Backward',
'arrange.front': 'Bring to Front',
'arrange.back': 'Send to Back',
'zoom.zoomIn': 'Zoom In',
'zoom.zoomOut': 'zoom Out',
};
更具體的引入寫法：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { IntlProvider } from 'react-intl';
import { zh } from './locale/zh';
import { en } from './locale/en';
const messageMap = {
zh,
en,
};
const getLocale = () => {
const locale = navigator.language;
return locale.startsWith('zh') ? 'zh' : 'en'; // en 是兜底語(yǔ)言
};
const locale = getLocale();
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(
);
- 計(jì)算一個(gè)語(yǔ)言標(biāo)識(shí)符，因?yàn)榫W(wǎng)站支持的語(yǔ)言可能就兩三種，當(dāng)用戶客戶端的語(yǔ)言不在范圍內(nèi)時(shí)，給一個(gè)兜底的。
- 確認(rèn)語(yǔ)言后，找出對(duì)應(yīng)的 messages 對(duì)象。
然后是一些其他的點(diǎn)：如果語(yǔ)言很多，可以考慮做語(yǔ)言包懶加載。另外還要做用戶修改語(yǔ)言后，更新 locale 和 messages props。
組件
然后是在業(yè)務(wù)組件中使用國(guó)際化文案。
最常用的就是 FormattedMessage 組件了，給 id props 提供 id 即可。
如果你需要得到文案字符串，傳入到一些組件中，比如 tooltip，你可以用主流的 hook 寫法：
import { useIntl } from 'react-intl';
const intl = useIntl();
或者可以用 HOC（高階組件），我沒用過，我不寫類組件。
類型安全
如果你用 TypeScript，你會(huì)希望傳入的 id 是有類型的，反正寫錯(cuò) id。React-Intl 提供了全局類型的設(shè)置。你只需要這樣寫：
import { en } from './locale/en';
import { zh } from './locale/zh';
declare global {
namespace FormatjsIntl {
interface Message {
ids: (keyof typeof zh) & (keyof typeof en)
}
}
}
keyof typeof zh 就是將中文 message 對(duì)象的 key 提取為一個(gè)聯(lián)合類型。
這里我巧妙地用了一個(gè) & 交叉類型，這樣不在二者 id 的交集內(nèi)的 key 會(huì)被排除在外，防止使用一個(gè)沒有在所有語(yǔ)言中都被定義的 id。
locale 也可以設(shè)置類型，防止錯(cuò)誤設(shè)置一些不支持的語(yǔ)言標(biāo)識(shí)。如下：
declare global {
namespace FormatjsIntl {
interface IntlConfig {
locale: 'en' | 'zh'
}
}
}
可能你希望 en 和 zh 的 key 要一致，我這里想到一個(gè)比較巧妙的做法。en 作為兜底語(yǔ)言，用 typeof 拿到類型，作為其他語(yǔ)言的類型，防止 id 漏寫。
const en = {
'delete': 'Delete',
}
// zh 對(duì)象的類型是 typeof en
const zh: (typeof en) = {
'delete': '刪除',
}
message 不支持嵌套
React-Intl 的 message 是不支持嵌套的。
你可以這樣寫：
const zh = {
'command.undo': '撤銷',
'command.redo': '重做',
}
但不能這樣寫：
const zh = {
'command': {
'undo': '撤銷',
'redo': '重做',
}
}
這個(gè)我是支持的。
嵌套并無(wú)必要，我們加前綴就好了，并且方便全局搜索，能夠快速定義一個(gè)國(guó)際化 id 的文本位置。類似 Vue 框架會(huì)做大量的駝峰和連線符的變換，全局搜索非常不友好，我不喜歡。
如果你喜歡嵌套的風(fēng)格，可以考慮寫一些腳本，支持將嵌套的轉(zhuǎn)換為拍平格式。
結(jié)尾
以上是 React-Intl 的一些入門用法。
文章標(biāo)題：React-Intl，實(shí)現(xiàn)React項(xiàng)目的前端國(guó)際化
標(biāo)題來(lái)源：http://www.dlmjj.cn/article/dpgppeo.html
