Jak používat React Intl k internacionalizaci vašich aplikací React

React Intl je oblíbená knihovna, která poskytuje sadu komponent a nástrojů pro internacionalizaci aplikací React. Internacionalizace, známá také jako i18n, je proces přizpůsobení aplikace různým jazykům a kulturám.

S ReactIntl ​​můžete snadno podporovat více jazyků a lokalit ve vaší aplikaci React.

Instalace React Intl

Chcete-li používat knihovnu React Intl, musíte ji nejprve nainstalovat. Můžete to udělat s více než jeden správce balíčků: npm, příze nebo pnpm.

Chcete-li jej nainstalovat pomocí npm, spusťte tento příkaz ve svém terminálu:

npm install reagovat-intl

Chcete-li jej nainstalovat pomocí příze, spusťte tento příkaz:

příze přidat reakt-intl

Jak používat React Intl Library

Jakmile nainstalujete knihovnu React Intl, můžete ve své aplikaci používat její součásti a funkce. React Intl má podobné funkce jako JavaScript Intl API.

Některé cenné komponenty nabízené knihovnou React Intl zahrnují Formátovaná zpráva a IntlProvider komponenty.

Komponenta FormattedMessage zobrazuje přeložené řetězce ve vaší aplikaci, zatímco komponenta IntlProvider poskytuje překlady a informace o formátování vaší aplikaci.

Než budete moci začít používat komponenty FormattedMessage a IntlProvider k překladu aplikace, musíte vytvořit soubor překladu. Překladový soubor obsahuje všechny překlady pro vaši aplikaci. Můžete vytvořit samostatné soubory pro každý jazyk a národní prostředí nebo použít jeden soubor, který bude obsahovat všechny překlady.

Například:

vývozníkonst zprávyve francouzštině = {
 Pozdrav: "Bonjour {name}"
}

vývozníkonst zprávyInitalština = {
 Pozdrav: "Buongiorno {name}"
}

Tento ukázkový překladový soubor obsahuje dva objekty překladu: zprávyve francouzštině a zprávy v italštině. Zástupný symbol můžete nahradit {název} v Pozdrav řetězec za běhu s dynamickou hodnotou.

Chcete-li použít překlady ve své aplikaci, musíte kořenovou komponentu aplikace zabalit do IntlProvider komponent. Komponenta IntlProvider trvá tři Reagovat rekvizity: národní prostředí, defaultLocale, a zprávy.

Prop locale přijímá řetězec, který určuje národní prostředí uživatele, zatímco defaultLocale určuje nouzový režim, pokud není preferované národní prostředí uživatele k dispozici. Nakonec podpěra zpráv přijímá objekt překladu.

Zde je příklad ukazující, jak můžete IntlProvider používat:

import Reagovat z"reagovat";
import ReactDOM z"react-dom/client";
import Aplikace z"./Aplikace";
import { IntlProvider } z"react-intl";
import { zprávyve francouzštině } z"./překlad";
ReactDOM.createRoot(dokument.getElementById("vykořenit")).poskytnout(

"fr" messages={messagesInFrench} defaultLocale="en">

 </IntlProvider>
 </React.StrictMode>
);

Tento příklad projde fr lokalita, zprávyve francouzštině překlad a výchozí en národní prostředí k IntlProvider komponent.

Můžete předat více než jeden objekt národního prostředí nebo překladu a IntlProvider automaticky rozpozná jazyk prohlížeče uživatele a použije příslušné překlady.

Chcete-li zobrazit přeložené řetězce ve vaší aplikaci, použijte Formátovaná zpráva komponent. The Formátovaná zpráva složka bere an id prop odpovídající ID zprávy v objektu zpráv.

Komponenta také bere a defaultMessage a hodnoty podpěra. The defaultMessage prop určuje nouzovou zprávu, pokud překlad není k dispozici pro aktuální národní prostředí, zatímco hodnoty prop poskytuje dynamické hodnoty pro zástupné symboly ve vašich přeložených zprávách.

Například:

import Reagovat z"reagovat";
import { FormattedMessage } z"react-intl";
funkceAplikace() {
vrátit se (




 id="Pozdrav"
 defaultMessage="Dobré ráno {name}"
 hodnoty={{ název: 'John'}}
 />
 </p>
 </div>
 );
}
vývoznívýchozí Aplikace;

V tomto bloku kódu je id podpěra toho Formátovaná zpráva komponenta používá Pozdrav klíč od zprávyve francouzštině objekt a hodnoty podpěra nahrazuje {název} zástupný symbol s hodnotou "Jan".

Formátování čísel pomocí komponenty FormattedNumber

React Intl také poskytuje FormattedNumber komponentu, kterou můžete použít k formátování čísel na základě aktuálního národního prostředí. Komponenta přijímá různé rekvizity pro přizpůsobení formátování, jako je styl, měna a minimální a maximální zlomkové číslice.

Zde jsou nějaké příklady:

import Reagovat z"reagovat";
import { FormattedNumber } z"react-intl";
funkceAplikace() {
vrátit se (




 Desetinný: <FormattedNumberhodnota={123.456}styl="desetinný" />
 </p>


 Procent: <FormattedNumberhodnota={123.456}styl="procent" />
 </p>
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento příklad používá FormattedNumber komponenta, která přijímá a hodnota prop určující číslo, které chcete formátovat.

Za použití styl prop, můžete upravit vzhled formátovaného čísla. Můžete nastavit styl podpírat desetinný, procentnebo měna.

Když nastavíte styl podpora měny, FormattedNumber komponenta formátuje číslo jako hodnotu měny pomocí kódu uvedeného v měna podpěra:

import Reagovat z"reagovat";
import { FormattedNumber } z"react-intl";
funkceAplikace() {
vrátit se (




 Cena: <FormattedNumberhodnota={123.456}styl="měna"měna="AMERICKÝ DOLAR" />
 </p>
 </div>
 );
}
vývoznívýchozí Aplikace;

The FormattedNumber komponenta formátuje číslo v bloku kódu výše pomocí měna styl a americký dolar kód měny.

Můžete také formátovat čísla s určitým počtem desetinných míst pomocí minimumFractionDigits a maximumFractionDigits rekvizity.

The minimumFractionDigits prop určuje minimální počet zobrazených zlomků. Na rozdíl od toho, maximumFractionDigits prop určuje maximální počet desetinných míst.

Pokud má číslo méně desetinných míst, než je zadáno minimumFractionDigits, React Intl jej doplní nulami. Pokud má číslo více desetinných míst, než je zadáno maximumFractionDigits, knihovna zaokrouhlí číslo nahoru.

Zde je příklad ukazující, jak můžete tyto rekvizity použít:

import Reagovat z"reagovat";
import { FormattedNumber } z"react-intl";
funkceAplikace() {
vrátit se (




 hodnota={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
vývoznívýchozí Aplikace;

Formátování dat pomocí komponenty FormattedDate

Data můžete formátovat způsobem, který je konzistentní a snadno čitelný pomocí React Intl. The Formátované datum poskytuje jednoduchý a efektivní způsob formátování dat. Funguje to podobně jako knihovny data-čas, které formátují data, jako je Moment.js.

Komponenta FormattedDate přebírá mnoho rekvizit, jako např hodnota, den, Měsíc, a rok. Hodnota prop přijímá datum, které chcete formátovat, a ostatní prop konfigurují jeho formátování.

Například:

import Reagovat z"reagovat";
import { FormattedDate } z"react-intl";
funkceAplikace() {
konst dnes = Novýdatum();
vrátit se (




 Dnesdatum je
 value={today}
 den ="numerický"
 měsíc ="dlouho"
 rok ="numerický"
 />
 </p>
 </div>
 );
}
vývoznívýchozí Aplikace;

V tomto příkladu je hodnota prop používá aktuální datum. Také pomocí den, Měsíc, a rok rekvizity, určíte, že chcete rok, měsíc a den zobrazovat v dlouhém formátu.

Kromě dne, měsíce a roku formátují vzhled data i další rekvizity. Zde jsou rekvizity a hodnoty, které akceptují:

• rok: "numerický", "2místný"
• Měsíc: "numerický", "2místný", "úzký", "krátký", "dlouhý"
• den: "numerický", "2místný"
• hodina: "numerický", "2místný"
• minuta: "numerický", "2místný"
• druhý: "numerický", "2místný"
• timeZoneName: "krátký dlouhý"

Můžete také použít Formátované datum komponenta pro formátování a zobrazení času:

import Reagovat z"reagovat";
import { FormattedDate } z"react-intl";
funkceAplikace() {
konst dnes = Novýdatum();
vrátit se (




 Čas je
 value={today}
 hodina ="numerický"
 minuta ="numerický"
 druhý ="numerický"
 />
 </p>
 </div>
 );
}
vývoznívýchozí Aplikace;

Internacionalizujte své aplikace React pro širší publikum

Naučili jste se, jak nainstalovat a nastavit knihovnu React-Intl ve vaší aplikaci React. React-intl usnadňuje formátování čísel, dat a měn vaší aplikace React. Data můžete formátovat na základě národního prostředí uživatele pomocí komponent FormattedMessage, FormattedNumber a FormattedDate.

Vývojáři React často dělají chyby, které mohou vést k vážným následkům. Například nesprávná aktualizace stavu. Je důležité si být vědom těchto běžných chyb a včas je napravit, abyste se vyhnuli nákladným problémům.