Kā izmantot React Intl, lai internacionalizētu savas React lietojumprogrammas

React Intl ir populāra bibliotēka, kas nodrošina komponentu un utilītu kopu React lietojumprogrammu internacionalizēšanai. Internacionalizācija, kas pazīstama arī kā i18n, ir lietojumprogrammas pielāgošanas process dažādām valodām un kultūrām.

Izmantojot ReactIntl, savā React lietojumprogrammā varat viegli atbalstīt vairākas valodas un lokalizācijas.

Instalējot React Intl

Lai izmantotu React Intl bibliotēku, vispirms tā ir jāinstalē. To var izdarīt ar vairāk nekā viens pakotņu pārvaldnieks: npm, dzija vai pnpm.

Lai to instalētu ar npm, terminālī palaidiet šo komandu:

npm instalēt react-intl

Lai to instalētu, izmantojot dziju, palaidiet šo komandu:

dzija pievienot react-intl

Kā lietot React Intl bibliotēku

Kad esat instalējis React Intl bibliotēku, varat izmantot tās komponentus un līdzekļus savā lietojumprogrammā. React Intl ir līdzīgas funkcijas JavaScript Intl API.

Daži vērtīgi komponenti, ko piedāvā React Intl bibliotēka, ietver Formatēts ziņojums un IntlProvider sastāvdaļas.

Komponents FormattedMessage parāda tulkotās virknes jūsu lietojumprogrammā, savukārt komponents IntlProvider nodrošina jūsu lietojumprogrammai tulkojumus un formatēšanas informāciju.

Jums ir jāizveido tulkošanas fails, lai varētu sākt lietot FormattedMessage un IntlProvider komponentus lietojumprogrammas tulkošanai. Tulkošanas failā ir visi jūsu lietojumprogrammas tulkojumi. Varat izveidot atsevišķus failus katrai valodai un lokalizācijai vai izmantot vienu failu, lai ietvertu visus tulkojumus.

Piemēram:

eksportētkonst ziņojumi franču valodā = {
 sveiciens: "Bonjour {name}"
}

eksportētkonst ziņojumiItāliešu = {
 sveiciens: "Buongiorno {name}"
}

Šajā tulkošanas faila paraugā ir divi tulkošanas objekti: ziņas franču valodā un ziņas itāļu valodā. Varat aizstāt vietturi {name} iekš sveiciens virkne izpildlaikā ar dinamisku vērtību.

Lai savā lietojumprogrammā izmantotu tulkojumus, lietojumprogrammas saknes komponents ir jāiekļauj ar IntlProvider komponents. IntlProvider komponents aizņem trīs Reaģēt rekvizīti: lokalizācija, defaultLocale, un ziņas.

Lokalizācijas piedāvājums akceptē virkni, kas norāda lietotāja lokalizāciju, savukārt defaultLocale norāda atkāpšanos, ja lietotāja vēlamā lokalizācija nav pieejama. Visbeidzot, ziņojumu rekvizīts pieņem tulkošanas objektu.

Šeit ir piemērs, kas parāda, kā varat izmantot IntlProvider:

imports Reaģēt no"reaģēt";
imports ReactDOM no"react-dom/client";
imports App no"./Lietotne";
imports { IntlProvider } no"react-intl";
imports { ziņojumi franču valodā } no"./tulkojums";
ReactDOM.createRoot(dokumentu.getElementById("sakne")).render(

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

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

Šis piemērs iztur fr lokalizācija, ziņas franču valodā tulkojumu un noklusējuma lv lokalizācija uz IntlProvider komponents.

Varat nodot vairāk nekā vienu lokalizāciju vai tulkošanas objektu, un IntlProvider automātiski noteiks lietotāja pārlūkprogrammas valodu un izmantos atbilstošos tulkojumus.

Lai lietojumprogrammā parādītu tulkotās virknes, izmantojiet Formatēts ziņojums komponents. The Formatēts ziņojums komponents aizņem an id prop, kas atbilst ziņojuma ID ziņojuma objektā.

Komponents aizņem arī a noklusējumaZiņojums un vērtības prop. The noklusējumaZiņojums prop norāda atkāpšanās ziņojumu, ja tulkojums pašreizējai lokalizācijai nav pieejams, savukārt vērtības prop nodrošina dinamiskas vērtības vietturiem jūsu tulkotajos ziņojumos.

Piemēram:

imports Reaģēt no"reaģēt";
imports { FormattedMessage } no"react-intl";
funkcijuApp() {
atgriezties (




 id="sveiciens"
 defaultMessage="Labrīt, {name}"
 vērtības={{ nosaukums: 'Džons'}}
 />
 </p>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šajā koda blokā id rekvizīti Formatēts ziņojums komponents izmanto sveiciens atslēga no ziņas franču valodā objekts un vērtības prop aizstāj {name} vietturis ar vērtību "Jānis".

Ciparu formatēšana ar FormattedNumber komponentu

React Intl nodrošina arī FormattedNumber komponents, kuru varat izmantot, lai formatētu skaitļus, pamatojoties uz pašreizējo lokalizāciju. Komponents pieņem dažādus rekvizītus, lai pielāgotu formatējumu, piemēram, stilu, valūtu un minimālās un maksimālās daļas ciparus.

Šeit ir daži piemēri:

imports Reaģēt no"reaģēt";
imports { FormattedNumber } no"react-intl";
funkcijuApp() {
atgriezties (




 Decimāldaļa: <FormattedNumbervērtību={123.456}stils="decimāldaļa" />
 </p>


 Procenti: <FormattedNumbervērtību={123.456}stils="procenti" />
 </p>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šajā piemērā tiek izmantots FormattedNumber komponents, kas pieņem a vērtību prop, norādot numuru, kuru vēlaties formatēt.

Izmantojot stils prop, varat pielāgot formatētā numura izskatu. Jūs varat iestatīt stils prop to decimālzīme, procentiem, vai valūta.

Kad iestatāt stils atbalsts valūtai, FormattedNumber komponents formatē skaitli kā valūtas vērtību, izmantojot kodu, kas norādīts valūta rekvizīts:

imports Reaģēt no"reaģēt";
imports { FormattedNumber } no"react-intl";
funkcijuApp() {
atgriezties (




 Cena: <FormattedNumbervērtību={123.456}stils="valūta"valūta="USD" />
 </p>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

The FormattedNumber komponents formatē numuru iepriekš koda blokā, izmantojot valūta stils un USD valūtas kods.

Varat arī formatēt skaitļus ar noteiktu zīmju skaitu aiz komata, izmantojot minimumsFractionDigits un maximumFractionDigits rekvizīti.

The minimumsFractionDigits prop norāda minimālo parādāmo daļu ciparu skaitu. Turpretim, maximumFractionDigits prop norāda maksimālo daļu ciparu skaitu.

Ja skaitlim ir mazāk daļskaitļu nekā norādītais minimumsFractionDigits, React Intl to papildinās ar nullēm. Ja skaitlim ir vairāk daļskaitļu nekā norādīts maximumFractionDigits, bibliotēka noapaļos skaitli uz augšu.

Tālāk ir sniegts piemērs, kas parāda, kā varat izmantot šos piederumus:

imports Reaģēt no"reaģēt";
imports { FormattedNumber } no"react-intl";
funkcijuApp() {
atgriezties (




 vērtība={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Datumu formatēšana ar FormattedDate komponentu

Varat formatēt datumus konsekventā un viegli lasāmā veidā, izmantojot React Intl. The FormattedDate komponents nodrošina vienkāršu un efektīvu veidu, kā formatēt datumus. Tas darbojas līdzīgi kā datuma un laika bibliotēkas, kas formatē datumus, piemēram, Moment.js.

FormattedDate komponents aizņem daudz rekvizītu, piemēram, vērtību, diena, mēnesis, un gadā. Vērtības rekvizīti pieņem datumu, kuru vēlaties formatēt, un citi rekvizīti konfigurē tā formatējumu.

Piemēram:

imports Reaģēt no"reaģēt";
imports { FormattedDate } no"react-intl";
funkcijuApp() {
konst šodien = jaunsDatums();
atgriezties (




 Šodiendatums ir
 vērtība={šodien}
 diena ="ciparu"
 mēnesis ="garš"
 gads ="ciparu"
 />
 </p>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šajā piemērā vērtību prop izmanto pašreizējo datumu. Tāpat, izmantojot diena, mēnesis, un gadā rekvizīti, jūs norādāt, ka vēlaties, lai gads, mēnesis un diena tiktu rādīta garā formātā.

Līdzās dienai, mēnesim un gadam citi rekvizīti arī formatē datuma izskatu. Šeit ir norādīti rekvizīti un vērtības, kuras viņi pieņem:

• gadā: "ciparu", "2 ciparu"
• mēnesis: "ciparu", "2 ciparu", "šaurs", "īss", "garš"
• diena: "ciparu", "2 ciparu"
• stunda: "ciparu", "2 ciparu"
• minūte: "ciparu", "2 ciparu"
• otrais: "ciparu", "2 ciparu"
• timeZoneName: "īss", "garš"

Varat arī izmantot FormattedDate formatēšanas komponents un rādīšanas laiks:

imports Reaģēt no"reaģēt";
imports { FormattedDate } no"react-intl";
funkcijuApp() {
konst šodien = jaunsDatums();
atgriezties (




 Laiks ir
 vērtība={šodien}
 stunda ="ciparu"
 minūte ="ciparu"
 otrais ="ciparu"
 />
 </p>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Internacionalizējiet savus React pieteikumus plašākai auditorijai

Jūs uzzinājāt, kā instalēt un iestatīt React-Intl bibliotēku savā React lietojumprogrammā. React-intl ļauj ērti formatēt React lietojumprogrammas numurus, datumus un valūtas. Varat formatēt datus, pamatojoties uz lietotāja lokalizāciju, izmantojot komponentus FormattedMessage, FormattedNumber un FormattedDate.

React izstrādātāji bieži pieļauj kļūdas, kas var izraisīt nopietnas sekas. Piemēram, nespēja pareizi atjaunināt stāvokli. Ir svarīgi apzināties šīs izplatītās kļūdas un savlaicīgi tās labot, lai izvairītos no dārgām problēmām.