>> 發文日期 : 2023/8/4
在專案開發上我們常常會遇到支援多國語系的需求，如果光靠google翻譯的話，很難保證他會不會翻譯出什麼奇怪的東西，所以這篇要來分享我們在react上如何使用react-intl來處理多國語系的需求。
先建立一個Provider把在外層的component包起來，這邊我另外建立了一個state去控制使用哪一個字典庫，這個會在之後講到。
這邊會用到最常見的文字翻譯功能，簡單來說是我們會先在字典庫裡寫好每個id會對應到的翻譯文字，然後使用官方提供的FormattedMessage component，在props上寫下他是對應到哪個id，這樣就可以在瀏覽器上看到對應的翻譯文字了。
在props上的id我們可以把它視為是對應到字典庫裡的key，而value的部分就是代表字典庫裡的變數，defaultMessage則是在字典庫裡找不到對應資料時的預設值。
在字典庫的部分我先建立兩種不同語言，可以看到在app.sub的部分就只有英文版是有資料的，也就是他會去選擇在沒資料的情形下，自動帶入預設的內容。
接下來會示範當我們在更改語系時，內容會如何去做切換。
從上面的程式碼可以看到，我用了兩個按鈕去控制最外層的IntlProvider locale的值，這樣就可以針對不同語系去載入對應的字典庫，另外我還使用了useIntl這個hook，我也可以透過locale或是formatMessage這兩個props去取得對應的值。