在 react 中，其實已經(jīng)有人封裝了多語言的擴(kuò)展庫，我們只需要安裝它就可以在我們的 react 項目中實現(xiàn)網(wǎng)站的多語言切換。
現(xiàn)在的網(wǎng)站很多時候都需要面對世界過個地區(qū)的人們訪問，如果針對每個地區(qū)的人都單獨構(gòu)建一個網(wǎng)站的話，這樣會非常費時費力，因此最好的解決辦法就是根據(jù)用戶的訪問來對網(wǎng)站的內(nèi)容進(jìn)行翻譯，這種翻譯一般是通過從數(shù)據(jù)庫獲取對應(yīng)的語言內(nèi)容來進(jìn)行頁面內(nèi)容的替換。
在 react 中，其實已經(jīng)有人封裝了多語言的擴(kuò)展庫，我們只需要安裝它就可以在我們的 react 項目中實現(xiàn)網(wǎng)站的多語言切換。
下面我們簡單介紹下如何使用它。
首先，我們需要通過包管理工具比如 npm 等來安裝它。
npm install i18next react-i18next@latest
然后，我們創(chuàng)建一個 i18n.js 配置文件，里面對多語言進(jìn)行相關(guān)的配置。
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n
.use(initReactI18next)
.init({
debug: true,
fallbackLng: 'en',
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
// language resources
resources: {
en: {
translation: {
welcome: "Welcome to React"
}
},
zh: {
translation: {
welcome: "歡迎使用 React"
}
},
}
});
export default i18n;
在這里面，resources 屬性里面配置的就是對應(yīng)的各個語言的翻譯，這里面的數(shù)據(jù)，一般我們都是從數(shù)據(jù)庫中獲取，這里為了演示，我們直接寫在了配置文件中。
接下來，我們介紹下如何在項目中使用它。
import { useTranslation } from "react-i18next";
const lngs = [
{ code: "en", native: "English" },
{ code: "zh", native: "Chinese" },
];
export default function App() {
const { t, i18n } = useTranslation();
const handleTrans = (code) => {
i18n.changeLanguage(code);
};
return (
<div style={{padding: '50px'}}>
<h1>{t("welcome")}</h1>
{lngs.map((lng, i) => {
const { code, native } = lng;
return <button notallow={() => handleTrans(code)}>{native}</button>;
})}
</div>
);
}在這里，我們放置了兩個按鈕，一個是中文，一個是英文，點擊中文，顯示中文內(nèi)容，點擊英文，顯示英文內(nèi)容，這里我們主要就是通過調(diào)用i18n.changeLanguage這個函數(shù)來實現(xiàn)對應(yīng)語言的轉(zhuǎn)換，我們需要翻譯的短語使t函數(shù)進(jìn)行包裹。
對于用戶語言的識別，我們主要可以通過下面的幾種方式進(jìn)行識別。
- cookie
- localStorage
- navigator
- querystring (append ?lng=LANGUAGE to URL)
- htmlTag
- path
- subdomain
這些方式 i18next 都是支持的，不過使用的時候需要先安裝。
npm install i18next-browser-languagedetector --save
使用方式如下：
import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import { reactI18nextModule } from "react-i18next";
import translationEN from '../public/locales/en/translation.json';
import translationDE from '../public/locales/de/translation.json';
// the translations
const resources = {
en: {
translation: translationEN
},
de: {
translation: translationDE
}
};
i18n
.use(detector)
.use(reactI18nextModule) // passes i18n down to react-i18next
.init({
resources,
fallbackLng: "en", // use en if detected lng is not available
keySeparator: false, // we do not use keys in form messages.welcome
interpolation: {
escapeValue: false // react already safes from xss
}
});
export default i18n;
i18next 此外還支持熱更新，還支持 SSR，它還提供了Trans組件，可以讓你方便的集成到項目中。
總之，i18next 是非常不錯的多語言站點插件，更多的使用方法和介紹你可以參考官網(wǎng)。
