使用 i18n hook 进行 React 翻译
介绍
最近，我的工作中遇到了一个需要为使用 React 构建的项目添加翻译的问题。我对此进行了研究，并找到了这个解决方案，希望对其他人有所帮助。
安装必要的软件包
要安装这些软件包，我们需要事先安装并配置npm。
安装完npm之后，我们必须安装以下软件包：
npm install --save i18next
npm install --save react-i18next
npm install --save i18next-browser-languagedetector
创建一个文件，用于存储翻译内容。
我们将在 src 目录下创建一个名为 translations 的文件夹，然后在 translations 文件夹内，为每种要添加翻译的语言创建一个文件夹。
./src
./translations
./es
./translations.js
我们将创建 translation.js 文件，用于存储翻译内容，在本例中，翻译内容针对的是西班牙语：
// File: translations.js
export const TRANSLATIONS_ES = {
"female": "Femenino"
}
创建 i18n 的配置文件
./src
./translations
./i18n.js
内容如下：
// File: i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
// import translations file
import { TRANSLATIONS_ES } from '../translations/es/translations'
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
es: {
// use translations file for spanish resources
translation: TRANSLATIONS_ES,
},
}
});
在组件中使用翻译钩子
// File: ExampleComponent.js
// import hook for translations and i18n configuration file
import { useTranslation } from "react-i18next";
import '../../translations/i18n.js';
export const ExampleComponent = () => {
// destructuring t() function for useTranslation()
const { t } = useTranslation();
return (
{// using t() function for translate}
<p>{ t('female') }</p>
)
}
感谢阅读。😊
