Kuidas kasutada React Intl oma Reacti rakenduste rahvusvahelistumiseks

React Intl on populaarne raamatukogu, mis pakub komplekti komponente ja utiliite Reacti rakenduste rahvusvahelistumiseks. Rahvusvahelistumine, tuntud ka kui i18n, on rakenduse kohandamine erinevatele keeltele ja kultuuridele.

ReactIntli abil saate oma Reacti rakenduses hõlpsasti toetada mitut keelt ja lokaati.

React Intl

React Intl teegi kasutamiseks peate selle esmalt installima. Saate seda teha koos rohkem kui üks paketihaldur: npm, lõng või pnpm.

Selle installimiseks npm-iga käivitage oma terminalis see käsk:

npm install react-intl

Selle installimiseks lõnga abil käivitage see käsk:

lõng lisa react-intl

Kuidas kasutada React Intl raamatukogu

Kui olete React Intl teegi installinud, saate selle komponente ja funktsioone oma rakenduses kasutada. React Intl-l on sarnased funktsioonid JavaScript Intl API.

Mõned väärtuslikud komponendid, mida React Intl teegi pakuvad, hõlmavad järgmist Vormindatud sõnum ja IntlProvider komponendid.

Komponent FormattedMessage kuvab teie rakenduses tõlgitud stringe, samas kui komponent IntlProvider pakub teie rakendusele tõlkeid ja vormindamisteavet.

Peate looma tõlkefaili, enne kui saate hakata kasutama komponente FormattedMessage ja IntlProvider oma rakenduse tõlkimiseks. Tõlkefail sisaldab kõiki teie rakenduse tõlkeid. Saate luua iga keele ja lokaadi jaoks eraldi failid või kasutada kõigi tõlgete jaoks ühte faili.

Näiteks:

eksportidakonst sõnumid prantsuse keeles = {
 tervitus: "Bonjour {name}"
}

eksportidakonst messagesInitaalia = {
 tervitus: "Buongiorno {name}"
}

See näite tõlkefail sisaldab kahte tõlkeobjekti: sõnumid prantsuse keeles ja sõnumid itaalia keeles. Saate asendada kohatäide {nimi} aastal tervitus string käitusajal dünaamilise väärtusega.

Rakenduses tõlgete kasutamiseks peate oma rakenduse juurkomponendi mähkima IntlProvider komponent. IntlProvideri komponent võtab kolm Reageeri rekvisiidid: lokaat, defaultLocale, ja sõnumid.

Lokaadi soovitus aktsepteerib stringi, mis määrab kasutaja lokaadi, samas kui defaultLocale määrab varuvariandi, kui kasutaja eelistatud lokaat pole saadaval. Lõpuks aktsepteerib sõnumite rekvisiit tõlkeobjekti.

Siin on näide, mis näitab, kuidas saate IntlProviderit kasutada:

importida Reageerige alates"reageeri";
importida ReactDOM alates"reageerimine/klient";
importida Rakendus alates"./Rakendus";
importida { IntlProvider } alates"react-intl";
importida { sõnumid prantsuse keeles } alates"./tõlge";
ReactDOM.createRoot(dokument.getElementById("juur")).renderda(

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

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

See näide möödub fr lokaat, sõnumid prantsuse keeles tõlge ja vaikeseade et asukohta IntlProvider komponent.

Saate edastada rohkem kui ühe lokaadi või tõlkeobjekti ja IntlProvider tuvastab automaatselt kasutaja brauseri keele ja kasutab sobivaid tõlkeid.

Rakenduses tõlgitud stringide kuvamiseks kasutage Vormindatud sõnum komponent. The Vormindatud sõnum komponent võtab an id prop, mis vastab sõnumi ID-le sõnumiobjektis.

Komponent võtab ka a vaikesõnum ja väärtused prop. The vaikesõnum prop määrab varuteate, kui tõlge pole praeguse lokaadi jaoks saadaval, samas kui väärtused prop pakub teie tõlgitud sõnumite kohahoidjatele dünaamilisi väärtusi.

Näiteks:

importida Reageerige alates"reageeri";
importida { Vormindatud sõnum } alates"react-intl";
funktsiooniRakendus() {
tagasi (




 id="tervitus"
 defaultMessage="Tere hommikust, {name}"
 väärtused={{ nimi: "John"}}
 />
 </p>
 </div>
 );
}
eksportidavaikimisi Rakendus;

Selles koodiplokis on id prop of the Vormindatud sõnum komponent kasutab tervitus võti sõnumid prantsuse keeles objekt ja väärtused prop asendab {nimi} kohatäide väärtusega "John".

Numbrite vormindamine komponendiga FormattedNumber

React Intl pakub ka VormindatudNumber komponent, mida saate kasutada numbrite vormindamiseks praeguse lokaadi alusel. Komponent aktsepteerib erinevaid rekvisiite, et kohandada vormingut, nagu stiil, valuuta ning minimaalse ja maksimaalse murdarvu numbrid.

siin on mõned näidised:

importida Reageerige alates"reageeri";
importida { FormattedNumber } alates"react-intl";
funktsiooniRakendus() {
tagasi (




 Kümnend: <VormindatudNumberväärtus={123.456}stiilis="kümnend" />
 </p>


 Protsent: <VormindatudNumberväärtus={123.456}stiilis="protsent" />
 </p>
 </div>
 );
}
eksportidavaikimisi Rakendus;

See näide kasutab VormindatudNumber komponent, mis aktsepteerib a väärtus prop, mis määrab numbri, mida soovite vormindada.

Kasutades stiilis prop, saate kohandada vormindatud numbri välimust. Saate määrata stiilis toetada kümnend, protsenti, või valuuta.

Kui määrate stiilis tugi valuutale, VormindatudNumber komponent vormindab numbri valuuta väärtusena, kasutades koodis määratud koodi valuuta prop:

importida Reageerige alates"reageeri";
importida { FormattedNumber } alates"react-intl";
funktsiooniRakendus() {
tagasi (




 Hind: <VormindatudNumberväärtus={123.456}stiilis="valuuta"valuuta="USD" />
 </p>
 </div>
 );
}
eksportidavaikimisi Rakendus;

The VormindatudNumber komponent vormindab numbri ülalolevas koodiplokis, kasutades valuuta stiil ja USD Valuuta kood.

Samuti saate vormindada numbreid kindla arvu komakohtadega, kasutades miinimumFractionDigits ja maximumFractionDigits rekvisiidid.

The miinimumFractionDigits prop määrab kuvatavate murdarvude minimaalse arvu. Seevastu maximumFractionDigits prop määrab murdosa numbrite maksimaalse arvu.

Kui numbris on määratust vähem murdosa numbreid miinimumFractionDigits, React Intl polsterdab selle nullidega. Kui numbris on rohkem murdosa numbreid kui määratud maximumFractionDigits, ümardab raamatukogu numbri ülespoole.

Siin on näide, mis näitab, kuidas saate neid rekvisiite kasutada:

importida Reageerige alates"reageeri";
importida { FormattedNumber } alates"react-intl";
funktsiooniRakendus() {
tagasi (




 väärtus={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
eksportidavaikimisi Rakendus;

Kuupäevade vormindamine komponendiga FormattedDate

React Intl abil saate kuupäevi vormindada järjepidevalt ja hõlpsasti loetavalt. The Vormindatud kuupäev komponent pakub lihtsat ja tõhusat viisi kuupäevade vormindamiseks. See toimib sarnaselt kuupäeva ja kellaaja teegid, mis vormindavad kuupäevi, nt Moment.js.

FormattedDate komponent võtab palju rekvisiite, näiteks väärtus, päeval, kuu, ja aastal. Väärtuse prop aktsepteerib kuupäeva, mida soovite vormindada, ja teised rekvisiidid konfigureerivad selle vormingu.

Näiteks:

importida Reageerige alates"reageeri";
importida { Vormindatud kuupäev } alates"react-intl";
funktsiooniRakendus() {
konst täna = uusKuupäev();
tagasi (




 Tänakuupäev on
 väärtus={täna}
 päev ="numbriline"
 kuu ="pikk"
 aasta ="numbriline"
 />
 </p>
 </div>
 );
}
eksportidavaikimisi Rakendus;

Selles näites on väärtus prop kasutab praegust kuupäeva. Samuti kasutades päeval, kuu, ja aastal rekvisiidid, määrate, et soovite aasta, kuu ja päeva kuvada pikas vormingus.

Lisaks päevale, kuule ja aastale kujundavad kuupäeva välimust ka muud rekvisiidid. Siin on rekvisiidid ja väärtused, mida nad aktsepteerivad:

• aastal: "numbriline", "2-kohaline"
• kuu: "numbriline", "2-kohaline", "kitsas", "lühike", "pikk"
• päeval: "numbriline", "2-kohaline"
• tund: "numbriline", "2-kohaline"
• minut: "numbriline", "2-kohaline"
• teiseks: "numbriline", "2-kohaline"
• timeZoneName: "lühike", "pikk"

Võite kasutada ka Vormindatud kuupäev vormingu komponent ja kuvamisaeg:

importida Reageerige alates"reageeri";
importida { Vormindatud kuupäev } alates"react-intl";
funktsiooniRakendus() {
konst täna = uusKuupäev();
tagasi (




 Aeg on
 väärtus={täna}
 tund ="numbriline"
 minut ="numbriline"
 teine ​​="numbriline"
 />
 </p>
 </div>
 );
}
eksportidavaikimisi Rakendus;

Muutke oma reageerimistaotlused laiemale vaatajaskonnale rahvusvaheliseks

Õppisite, kuidas installida ja seadistada React-Intl teeki oma Reacti rakenduses. React-intl muudab Reacti rakenduse numbrite, kuupäevade ja valuutade vormindamise lihtsaks. Saate vormindada andmeid kasutaja lokaadi alusel, kasutades komponente FormattedMessage, FormattedNumber ja FormattedDate.

Reaktsiooni arendajad teevad sageli vigu, mis võivad viia tõsiste tagajärgedeni. Näiteks oleku õige värskendamise ebaõnnestumine. Oluline on olla teadlik nendest levinud vigadest ja need varakult parandada, et vältida kulukaid probleeme.