使用React和i18next来实现多语言翻译

2 年 ago
逸, 科
2 minutes

总结

本文介绍了在使用React构建的全球部署的Web应用程序中实现多语言支持的方法。具体而言，将使用名为i18next的库来添加多语言支持功能。

创建React项目并安装所需的软件包。

首先，创建一个React项目并安装所需的包。运行以下命令。

npx create-react-app react-i18next-sample

接下来，我们将安装与i18next相关的软件包。

npm i i18next react-i18next i18next-browser-languagedetector

将英语翻译成日语

首先，使用i18next设置从英语到日语的翻译。为此，请编辑以下文件。

我們將在這個檔案中初始化i18next和相關套件，並設定將英文翻譯成日文的資源。

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import languageDetector from 'i18next-browser-languagedetector';

i18next
    .use(initReactI18next)
    .use(languageDetector)
    .init({
        debug: true,
        fallbackLng: 'en',
        resources: {
            en: {
                translation: {
                    learn: 'Learn React',
                }
            }
        }
    });

在这个文件中，我们将引入 i18n.js。

import './i18n';

在这个文件中，我们会从 i18n 中获取翻译函数，并在组件中使用它。

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
      <header className="App-header">
        {/* ... */}
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('learn')}
        </a>
      </header>
    </div>
  );
}

export default App;
}

使用i18nKey将description的内容翻译成中文。

然后，通过使用i18nKey来翻译描述，在组件内部进行操作。首先，将以下代码添加到src/App.js文件中。

import { useTranslation, Trans } from 'react-i18next';

<Trans i18nKey="description">
    how to use i18next
</Trans>

此外，您需要将src/i18n.js文件的内容更改如下。

resources: {
    en: {
        translation: {
            learn: 'Learn React',
            description: 'how to use i18next',
        },
    },
},

创建语言切换按钮

最后，创建一个语言切换按钮。这样，用户就可以切换语言。在src/App.js文件中添加以下代码。

const lngs = {
    en: { nativeName: 'English' },
    ja: { nativeName: 'Japanese' },
};

const { t, i18n } = useTranslation();

<div>
    {Object.keys(lngs).map((lng) => (
        <button
            type="submit"
            key={lng}
            onClick={() => i18n.changeLanguage(lng)}
            disabled={i18n.resolvedLanguage === lng}
        >
            {lngs[lng].nativeName}
        </button>
    ))}
</div>

此外，将以下内容添加到src/i18n.js文件中。

ja: {
    translation: {
        learn: 'Reactを学ぶ',
        description: 'i18nextの使い方',
    },
},

概括

使用React和i18next，您已经准备好实现多语言翻译了。通过在i18n.js文件中添加翻译资源，并创建语言切换按钮，您可以构建支持多语言的React应用。用户可以轻松切换语言，并实现应用程序的多语言支持。

bannerAds