Kako uporabiti React Intl za internacionalizacijo svojih aplikacij React

React Intl je priljubljena knjižnica, ki ponuja nabor komponent in pripomočkov za internacionalizacijo aplikacij React. Internacionalizacija, znana tudi kot i18n, je proces prilagajanja aplikacije različnim jezikom in kulturam.

Z ReactIntl ​​lahko preprosto podpirate več jezikov in področij v svoji aplikaciji React.

Namestitev React Intl

Če želite uporabljati knjižnico React Intl, jo morate najprej namestiti. To lahko storite z več kot en upravitelj paketov: npm, preja ali pnpm.

Če ga želite namestiti z npm, zaženite ta ukaz v vašem terminalu:

npm namestite reakcijo-intl

Če ga želite namestiti s prejo, zaženite ta ukaz:

preja dodaj react-intl

Kako uporabljati knjižnico React Intl

Ko namestite knjižnico React Intl, lahko njene komponente in funkcije uporabljate v svoji aplikaciji. React Intl ima podobne funkcije kot JavaScript Intl API.

Nekatere dragocene komponente, ki jih ponuja knjižnica React Intl, vključujejo

FormattedMessage in IntlProvider komponente.

Komponenta FormattedMessage prikaže prevedene nize v vaši aplikaciji, medtem ko komponenta IntlProvider zagotavlja prevode in informacije o oblikovanju vaši aplikaciji.

Ustvariti morate prevajalsko datoteko, preden lahko začnete uporabljati komponenti FormattedMessage in IntlProvider za prevajanje vaše aplikacije. Prevajalska datoteka vsebuje vse prevode za vašo aplikacijo. Ustvarite lahko ločene datoteke za vsak jezik in področje ali uporabite eno samo datoteko, ki vsebuje vse prevode.

Na primer:

izvozkonst messagesInFrench = {
 pozdrav: "Bonjour {name}"
}

izvozkonst messagesInItalian = {
 pozdrav: "Buongiorno {name}"
}

Ta vzorčna prevodna datoteka vsebuje dva predmeta prevoda: sporočila v francoščini in sporočila v italijanščini. Lahko zamenjate ogrado {name} v pozdrav niz v času izvajanja z dinamično vrednostjo.

Če želite uporabiti prevode v svoji aplikaciji, morate korensko komponento aplikacije oviti z IntlProvider komponento. Komponenta IntlProvider potrebuje tri React props: locale, defaultLocale, in sporočila.

Prop področne nastavitve sprejme niz, ki določa uporabnikovo področno nastavitev, medtem ko defaultLocale podaja nadomestno možnost, če uporabnikova področna nastavitev ni na voljo. Nazadnje, sporočilo prop sprejme objekt prevoda.

Tukaj je primer, ki prikazuje, kako lahko uporabite IntlProvider:

uvoz Reagiraj od"reagirati";
uvoz ReactDOM od"react-dom/klient";
uvoz aplikacija od"./Aplikacija";
uvoz {IntlProvider} od"react-intl";
uvoz { messagesInFrench } od"./prevod";
ReactDOM.createRoot(dokument.getElementById("root")).render(

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

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

Ta primer prestane fr locale, the sporočila v francoščini prevod in privzeto en locale na IntlProvider komponento.

Posredujete lahko več kot en področni ali prevodni objekt in IntlProvider samodejno zazna jezik uporabnikovega brskalnika in uporabi ustrezne prevode.

Za prikaz prevedenih nizov v vaši aplikaciji uporabite FormattedMessage komponento. The FormattedMessage komponenta sprejme an id prop, ki ustreza ID-ju sporočila v objektu sporočil.

Komponenta ima tudi a privzeto sporočilo in vrednote prop. The privzeto sporočilo prop določa nadomestno sporočilo, če prevod ni na voljo za trenutno področno nastavitev, medtem ko vrednote prop zagotavlja dinamične vrednosti za ograde v vaših prevedenih sporočilih.

Na primer:

uvoz Reagiraj od"reagirati";
uvoz { FormattedMessage } od"react-intl";
funkcijoaplikacija() {
vrnitev (




 id="pozdrav"
 privzeto sporočilo="Dobro jutro {name}"
 vrednosti={{ ime: 'Janez'}}
 />
 </p>
 </div>
 );
}
izvozprivzeto aplikacija;

V tem kodnem bloku je id rekvizit za FormattedMessage komponenta uporablja pozdrav ključ od sporočila v francoščini predmet in vrednote prop nadomešča {name} ograda z vrednostjo "Janez".

Oblikovanje števil s komponento FormattedNumber

React Intl ponuja tudi FormattedNumber komponento, ki jo lahko uporabite za oblikovanje števil na podlagi trenutne lokalne nastavitve. Komponenta sprejema različne pripomočke za prilagoditev oblikovanja, kot so slog, valuta ter najmanjše in največje ulomke.

Tukaj je nekaj primerov:

uvoz Reagiraj od"reagirati";
uvoz { FormattedNumber } od"react-intl";
funkcijoaplikacija() {
vrnitev (




 decimalno: <FormattedNumbervrednost={123.456}stil="decimalno" />
 </p>


 Odstotek: <FormattedNumbervrednost={123.456}stil="odstotek" />
 </p>
 </div>
 );
}
izvozprivzeto aplikacija;

Ta primer uporablja FormattedNumber komponenta, ki sprejema a vrednost prop, ki določa številko, ki jo želite oblikovati.

Uporabljati stil prop, lahko prilagodite videz oblikovane številke. Lahko nastavite stil podpirati decimalno, odstotkov, oz valuta.

Ko nastavite stil podpori valuti, FormattedNumber komponenta oblikuje število kot vrednost valute z uporabo kode, določene v valuta rekvizit:

uvoz Reagiraj od"reagirati";
uvoz { FormattedNumber } od"react-intl";
funkcijoaplikacija() {
vrnitev (




 Cena: <FormattedNumbervrednost={123.456}stil="valuta"valuta="AMERIŠKI DOLAR" />
 </p>
 </div>
 );
}
izvozprivzeto aplikacija;

The FormattedNumber komponenta oblikuje številko v zgornjem kodnem bloku z uporabo valuta slog in ameriški dolar šifra valute.

Številke lahko tudi oblikujete z določenim številom decimalnih mest z uporabo minimumFractionDigits in maximumFractionDigits rekviziti.

The minimumFractionDigits prop določa najmanjše število ulomkov za prikaz. V nasprotju s tem je maximumFractionDigits prop določa največje število ulomkov.

Če ima število manj ulomkov, kot je navedeno minimumFractionDigits, bo React Intl dodal ničle. Če ima število več ulomkov, kot je navedeno maximumFractionDigits, bo knjižnica število zaokrožila navzgor.

Tukaj je primer, ki prikazuje, kako lahko uporabite te pripomočke:

uvoz Reagiraj od"reagirati";
uvoz { FormattedNumber } od"react-intl";
funkcijoaplikacija() {
vrnitev (




 vrednost={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
izvozprivzeto aplikacija;

Oblikovanje datumov s komponento FormattedDate

Datume lahko oblikujete tako, da so dosledni in lahko berljivi z uporabo React Intl. The FormattedDate zagotavlja preprost in učinkovit način za oblikovanje datumov. Deluje podobno kot datumsko-časovne knjižnice, ki oblikujejo datume, kot je Moment.js.

Komponenta FormattedDate uporablja številne pripomočke, kot je npr vrednost, dan, mesec, in leto. Prop vrednosti sprejme datum, ki ga želite oblikovati, drugi props pa konfigurirajo njegovo oblikovanje.

Na primer:

uvoz Reagiraj od"reagirati";
uvoz { FormattedDate } od"react-intl";
funkcijoaplikacija() {
konst danes = novoDatum();
vrnitev (




 Danesdatum je
 vrednost={danes}
 dan="številčno"
 mesec="dolga"
 leto="številčno"
 />
 </p>
 </div>
 );
}
izvozprivzeto aplikacija;

V tem primeru je vrednost prop uporablja trenutni datum. Tudi z uporabo dan, mesec, in leto props določite, da želite, da se leto, mesec in dan prikažejo v dolgi obliki.

Poleg dneva, meseca in leta drugi rekviziti oblikujejo tudi videz datuma. Tukaj so rekviziti in vrednosti, ki jih sprejemajo:

• leto: "številčno", "2-mestno"
• mesec: "številčno", "2-mestno", "ozko", "kratko", "dolgo"
• dan: "številčno", "2-mestno"
• uro: "številčno", "2-mestno"
• minuta: "številčno", "2-mestno"
• drugo: "številčno", "2-mestno"
• timeZoneName: "kratek", "dolg"

Uporabite lahko tudi FormattedDate komponenta za formatiranje in čas prikaza:

uvoz Reagiraj od"reagirati";
uvoz { FormattedDate } od"react-intl";
funkcijoaplikacija() {
konst danes = novoDatum();
vrnitev (




 Čas je
 vrednost={danes}
 ura="številčno"
 minuta="številčno"
 drugi="številčno"
 />
 </p>
 </div>
 );
}
izvozprivzeto aplikacija;

Internacionalizirajte svoje aplikacije React za širše občinstvo

Naučili ste se namestiti in nastaviti knjižnico React-Intl v svoji aplikaciji React. React-intl olajša formatiranje številk, datumov in valut vaše aplikacije React. Podatke lahko oblikujete glede na področne nastavitve uporabnika s komponentami FormattedMessage, FormattedNumber in FormattedDate.

Razvijalci React pogosto delajo napake, ki lahko povzročijo resne posledice. Na primer, neustrezna posodobitev stanja. Pomembno je, da se zavedate teh pogostih napak in jih zgodaj odpravite, da se izognete dragim težavam.