本文講解如何使用 React-Intl 庫給你的 React 應用做國際化。
安裝
React 項目默認你已經搭建好了。可以用過氣的 CRA，流行的 vite，或者用 React 推薦的 Next.js。
安裝 React-Intl。
或者用 yarn。
使用
接著我們需要將國際化能力注入到 React 應用中。
使用的是經典的 context 上下文方案：
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(
<IntlProvider locale={locale} messages={messageMap[locale]}>
<App />
</IntlProvider>
);
IntlProvider 是一個 context.provider 組件，用來注入一些國際化需要的信息。其中最重要的信息是 locale 和 messages。
locale 是一個字符串，代表一個語言標識，使用了 BCP 47 語言標記規范。比如中文用 ??zh???，英文用 ??en???，簡體用 ??zh-CN??。
標識符是會提供給瀏覽器自帶的 Intl 對象使用的，Intl 對象的方法會通過它確定如何做轉換，比如不同國家數字的分隔符是不同的。
可以看到，原點、逗號、空格，什么都有。所以你要傳一個正確的語言標識符。
messages 就簡單多了，就是一個 id 到 value 的映射，組件中傳一個 id，就能拿到對應的語言文案了。比如
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 是兜底語言
};
const locale = getLocale();
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(
<IntlProvider locale={locale} messages={messageMap[locale]}>
<App />
</IntlProvider>
);
- 計算一個語言標識符，因為網站支持的語言可能就兩三種，當用戶客戶端的語言不在范圍內時，給一個兜底的。
- 確認語言后，找出對應的 messages 對象。
然后是一些其他的點：如果語言很多，可以考慮做語言包懶加載。另外還要做用戶修改語言后，更新 locale 和 messages props。
組件
然后是在業務組件中使用國際化文案。
最常用的就是 FormattedMessage 組件了，給 id props 提供 id 即可。
<FormattedMessage id="command.undo" />
如果你需要得到文案字符串，傳入到一些組件中，比如 tooltip，你可以用主流的 hook 寫法：
import { useIntl } from 'react-intl';
const intl = useIntl();
<ToolBtn tooltipCnotallow={intl.formatMessage({ id: 'tool.select' })}><IconSelect /></ToolBtn>或者可以用 HOC（高階組件），我沒用過，我不寫類組件。
類型安全
如果你用 TypeScript，你會希望傳入的 id 是有類型的，反正寫錯 id。React-Intl 提供了全局類型的設置。你只需要這樣寫：
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 對象的 key 提取為一個聯合類型。
這里我巧妙地用了一個 & 交叉類型，這樣不在二者 id 的交集內的 key 會被排除在外，防止使用一個沒有在所有語言中都被定義的 id。
locale 也可以設置類型，防止錯誤設置一些不支持的語言標識。如下：
declare global {
namespace FormatjsIntl {
interface IntlConfig {
locale: 'en' | 'zh'
}
}
}可能你希望 en 和 zh 的 key 要一致，我這里想到一個比較巧妙的做法。en 作為兜底語言，用 typeof 拿到類型，作為其他語言的類型，防止 id 漏寫。
const en = {
'delete': 'Delete',
}
// zh 對象的類型是 typeof en
const zh: (typeof en) = {
'delete': '刪除',
}message 不支持嵌套
React-Intl 的 message 是不支持嵌套的。
你可以這樣寫：
const zh = {
'command.undo': '撤銷',
'command.redo': '重做',
}但不能這樣寫：
const zh = {
'command': {
'undo': '撤銷',
'redo': '重做',
}
}這個我是支持的。
嵌套并無必要，我們加前綴就好了，并且方便全局搜索，能夠快速定義一個國際化 id 的文本位置。類似 Vue 框架會做大量的駝峰和連線符的變換，全局搜索非常不友好，我不喜歡。
如果你喜歡嵌套的風格，可以考慮寫一些腳本，支持將嵌套的轉換為拍平格式。
結尾
以上是 React-Intl 的一些入門用法。
