反应 i18n 外部组件 - Javascript

React是一种非常流行的JavaScript库，用于构建用户界面。i18n则是指国际化，React i18n是一款由React社区开发的特殊软件包，用于在React应用程序中轻松处理国际化。在这里，我们将讨论如何使用React i18n与外部组件。

安装

您可以通过npm安装React i18n。打开终端，进入程序目录，然后运行以下命令：

npm install react-i18next --save

这将安装react-i18next软件包并将其添加到您的项目依赖项中。

配置

在使用React i18n之前，您需要为其创建一个配置文件。您可以创建一个名为i18n.js的新文件，并将其放在项目的根目录中。将以下代码复制到该文件中：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  de: {
    translation: {
      "Welcome to React": "Willkommen bei React und react-i18next"
    }
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en",
    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;

上面的代码定义了一个名为resources的对象，其中包含存储翻译的键值对。在此示例中，我们有英语和德语的翻译，但您可以根据需要添加更多语言。请注意，translation键必须始终存在，并且必须在其中添加所有翻译。

使用外部组件

要使用React i18n与外部组件，请先在组件文件的顶部导入i18next：

import i18next from 'i18next';

通过将组件到处为withTranslation（）的返回值，必须使用使用withTranslation（）高阶组件进行包装。这可以使用ES2020的新“export default”语法来完成：

export default withTranslation()(ComponentName);

或者，您也可以在组件的最后一行使用withTranslation包装组件，如下所示：

export default YourComponent

要在外部组件中使用翻译，请使用翻译方法如下所示：

i18next.t('Welcome to React')

在上面的代码中，'Welcome to React'是要翻译的文本键。 通过将这个文本传递给t（）翻译方法，翻译将被检索，然后将其返回给您的组件。

完整的外部组件文件如下所示（在上面的i18n.js文件中定义）：

import React from 'react';
import { withTranslation } from 'react-i18next';
import i18next from 'i18next';

class ExternalComponent extends React.Component {
  render() {
    return <div>{i18next.t('Welcome to React')}</div>;
  }
}

export default withTranslation()(ExternalComponent);

总结

React i18n使处理国际化更加容易，并且可以与React应用程序中的外部组件一起使用。通过导入i18next库和使用withTranslation（）高阶组件，您可以将i18n实例传递给组件并使用i18next.t（）方法来调用翻译。