React i18N - 如何国际化React应用程序

　　国际化是使您的网站提供不同的地区的过程。这些地域可以是我们，英国，德国，中国，阿拉伯，印度。将应用程序翻译为不同的语言环境涉及几件事，例如将文本翻译为语言，更改日期，时间和数字格式，更改货币等等。因此，我决定使用两个流行的库，React-18Next和React-Intl对如何将React应用程序本地化对不同语言环境的React应用程序。

　　React-I18ext.

　　让我们首先了解React-i18Next。它是一个强大的框架，基于i18EXT，许多开发人员用于国际化的目的。React-i18Next可用于国际化React和React Native应用。以下是关于React-i18Next的一些有趣的事实。

　　它是最佳的服务器端渲染。它包括多个插件，可检测多种语言加载多种语言的翻译。您可以选择缓存翻译。它比与其他包集成时的其他i18N库更灵活。它基于i18Next，不仅限于React。因此，学习一次并在任何地方使用。React-Intl.

　　React-Intl使用上下文API来为整个React应用程序提供语言开关包装器。如果没有可用语言或缺少某个文件，我们也可以定义默认文本。React-Intl提供React组件和API，用于翻译包括多元化的日期，数字，货币和串。

　　当您使用React-Intl时，您必须注意IntelProvider，InjortIntl，DefeneMessages，Formatteddate，FormattedTime，FormattedRelativeme，FormattedNumber，FormattedPolural和FormattedMessage。

　　使用独立组件构建

　　无论您实现您的国际化方式，确保您特别注意您的基本组件。

　　作为能够支持所有相关的地区的独立构建块构建它们。您还可以使用位（GitHub）等工具逐步将新的可重用组件逐步推送到您自己的共享组件集合（在Bit.dev上）。

　　可以检查和测试独立组件（按比特管理）的不同语言环境，并在需要时重复使用（而不是建立近复制，按照您的方式适合新的地区）

　　React-I18Next入门

　　首先让我们使用NPM使用以下命令创建React应用程序。

　　npx create-react-app react-translation-app

　　您可以使用React应用程序而不是React-Player-App的任何名称。让我们走进创建的文件夹。

　　cd react-translation-app

　　接下来，我们必须为此教程安装React-I18Next和所需的依赖项。

　　npm install i18next i18next-xhr-backend i18next-browser-languagedetector react-i18next

　　在公用文件夹中，您可以找到index.html文件。让我们添加Bootstrap和jQuery以更好地渲染内容。

　　接下来，在SRC文件夹中创建I18Next.js文件。打开文件并导入以下库。

　　import i18n from "i18next";

　　import { initReactI18next } from "react-i18next";

　　import Backend from "i18next-xhr-backend";

　　import LanguageDetector from "i18next-browser-languagedetector";

　　现在我们已准备好初始化语言和其他功能。创建一系列语言您将在此应用程序中使用或您要支持的语言环境。

　　const Languages=[“en”, “fr”, “de”];

　　在这里，我们使用英语，法语和德语。EN，FR和DE是他们的流行缩写。因此最好使用它们，因为它将避免任何混淆。

　　接下来，创建导出默认功能为i18n并添加以下代码。

　　export default i18n

　　.use(Backend)

　　.use(LanguageDetector)

　　.use(initReactI18next)

　　.init({

　　fallbackLng: "en",

　　debug: true,

　　whitelist: Languages,

　　interpolation: {

　　escapeValue: false,

　　},

　　});

　　这是每个重要的线条所做的

　　use（Backend）： - 标识用户输入语言use(LanguageDetector)： - 将I18N实例传递给React-I18Next的模块use(initReactI18next)： - I18Next的古玩市场实例化。fallbackLng: “en”： - 默认语言是英语

　　打开index.js文件并将以下代码添加到其中。

　　import "./i18next";

　　import React, { Suspense } from "react";

　　ReactDOMder(

　　<suspense fallback="{Loading ……}>

　　document.getElementById('root')

　　);

　　有什么问题？

　　通常，它是组件在从缓存中加载数据时挂起呈现的泛型方式。悬疑可以完全控制在何处在连接中显示占位符。这就是为什么我们用反应悬念包裹了标记。

　　接下来，打开App.js文件并添加以下代码。

　　import React from 'react';

　　import './App.css';

　　import { useTranslation } from "react-i18next";

　　function App() {

　　const { t, i18n }=useTranslation();

　　function handleClick(lang) {

　　i18n.changeLanguage(lang);

　　}

　　return (

　　{t("text2.t")}

　　);

　　}

　　export default App;

　　最后，我们必须创建翻译文件。打开公用文件夹并创建一个名为locales的目录。在该Locales文件夹中创建三个文件夹，de和fr为en，de，和fr。确保这些文件夹的名称应类似于我们在I18Next.js文件中提供的常量值。

　　接下来，为每个文件夹创建JSON文件并将其命名为Translation.json。

　　在我的应用程序中，这些文件将包含以下文本。

　　en / translation.json.

　　{

　　"text1": {

　　"t": "Welcome to the new World of ReactJS Application"

　　},

　　"text2": {

　　"t": "This is ReactJS application with React with React Hook and I18NEXT"

　　}

　　}

　　de / translation.js.

　　{

　　"text1": {

　　"t": "Willkommen in der neuen World of ReactJS-Anwendung"

　　},

　　"text2": {

　　"t": "Dies ist die ReactJS-Anwendung mit React with React Hook und I18NEXT"

　　}

　　}

　　fr/translation.js

　　{

　　"text1": {

　　"t": "Bienvenue dans la nouvelle application World of ReactJS"

　　},

　　"text2": {

　　"t": "Ceci est l'application ReactJS avec React avec React Hook et I18NEXT"

　　}

　　}

　　注意：我不了解德语和法语语言。我使用谷歌翻译携带这些文本。

　　就是这样了。现在我们可以运行应用程序并查看输出。

　　npm start serve

　　react-Intl入门

　　我们之前讨论过的另一个重要库是React-Intl。让我们用它做一些例子。首先，使用npm i react-intl命令安装库。

　　然后创建一个locales目录并为您在应用程序中使用的每个语言环境创建JSON文件。我创建了以下文件。

　　·en.json.

　　·es.json.

　　·Fr.Json.

　　·ru.Json.

　　·ar-EG.JSON

　　由于默认语言是英语，请打开en.json文件并添加一些文本，如下所示。

　　{

　　"title": "Day Quote: ",

　　"text": "The day you plant the seed is not the day you eat the fruit. Have patience and keep planting",

　　"person": "Tutorial by {getPersonName}",

　　"change": "Change Language"

　　}

　　在这里，我们动态地将每个语言的人员更改为 {getPersonName}.。

　　同样打开es.json，fr.json，ru.json和ar-eg.json文件，并包括相关的翻译文本。

　　es.json.

　　{

　　"title": "Cotización del día: ",

　　"text": "El día en que siembras la semilla no es el día en que comes la fruta. Ten paciencia y sigue plantando ",

　　"person": "Tutorial de {getPersonName}",

　　"change": "Cambiar idioma"

　　}

　　我不会为其他语言做这件事，因为它将不必要地制作文章。

　　接下来，创建一个名为组件的文件夹，以将应用程序逻辑的组件与内化相关联。我们必须在组件文件夹中创建两个更多文件夹。那些是LanguageProvider和报价。

　　首先，在报价文件夹中创建一个名为message.js文件的文件。此文件包含在没有可用语言或缺少某个文件时将呈现的默认消息。打开Messages.js文件，并包含以下代码片段，如下所示。

　　import { defineMessages } from "react-intl";

　　export default defineMessages({

　　quote: {

　　title: "Default Title, Check language files",

　　text: "Default quote text, Check language files",

　　person: "Default person name, Check language files",

　　change: "Change Language",

　　},

　　});

　　接下来，在报价文件夹中创建另一个JavaScript文件，并将其命名为quote.js。我将在该文件中添加以下代码。

　　export default class Quote extends Component {

　　render() {

　　const personName="Techylo Solutions";

　　return (

　　<formattedmessage< p="">

　　id="text"

　　defaultMessage={defaultMessage.quote.text}

　　/>

　　<formattedmessage< p="">

　　id="person"

　　defaultMessage={defaultMessage.quote.person}

　　values={{

　　getPersonName: personName,

　　code: (word)=> (

　　<strong< p="">

　　style={{

　　textTransform: "uppercase",

　　texDecoration: "underline",

　　}}

　　>

　　{word}

　　);

　　}

　　}

　　我希望你还记得我们在早些时候创建了一个名为langiceprovider的文件夹。让我们在其中创建LanguageProvider.js文件。

　　此文件的目的是向App.js文件提供信息，该文件包含所有其他组件。在这里，我们使用React Hooks。它也称为包装部件。

　　导入所有必需的组件和翻译。

　　import React, { useState } from "react";

　　import { IntlProvider, FormattedMessage } from "react-intl";

　　import English from "../../translation/en.json";

　　import Arabic from "../../translation/ar-EG.json";

　　import Spanish from "../../translation/es.json";

　　import French from "../../translation/fr.json";

　　import Russian from "../../translation/ru.json";

　　import defaultMessage from "../Quote/message";

　　我们必须在语言环境之间实现切换。我们将使用Questate React Hook进行。

　　此文件中的代码的前半部分看起来像下面的代码。

　　export default function LanguageProvider(props) {

　　const [locale, setLocale]=useState("en");

　　const [lang, setLang]=useState(English);

　　const changeLang=(getLang)=> {

　　setLocale(getLang);

　　switch (getLang) {

　　case "en":

　　setLang(English);

　　break;

　　case "es":

　　setLang(Spanish);

　　break;

　　case "ar-EG":

　　setLang(Arabic);

　　break;

　　case "ru":

　　setLang(Russian);

　　break;

　　case "fr":

　　setLang(French);

　　break;

　　default:

　　setLang(English);

　　}

　　};

　　我们将把我们要在返回声明中呈现的东西。所有信息都填写在Intlprovider中。IntlProvider是Reft-Intl库提供的上下文API。这里来自组件的信息被传输到包含所有组件的App组件。

　　<button< p="">

　　type="button"

　　onClick={()=> changeLang("en")}

　　className="text-center btn btn-warning mr-2"

　　>

　　English

　　

　　<button< p="">

　　type="button"

　　onClick={()=> changeLang("es")}

　　className="text-center btn btn-primary mr-2"

　　>

　　Spanish

　　

　　<button< p="">

　　type="button"

　　onClick={()=> changeLang("fr")}

　　className="text-center btn btn-secondary mr-2"

　　>

　　French

　　

　　<button< p="">

　　type="button"

　　onClick={()=> changeLang("ru")}

　　className="text-center btn btn-danger mr-2"

　　>

　　Russian

　　

　　<button< p="">

　　type="button"

　　onClick={()=> changeLang("ar-EG")}

　　className="text-center btn btn-success mr-2"

　　>

　　Arabic

　　{props.children}

　　如此而已。现在，您可以运行应用程序并查看输出。