Kaip naudoti „React Intl“ savo „React“ programoms internacionalizuoti

„React Intl“ yra populiari biblioteka, kurioje yra komponentų ir paslaugų rinkinys, skirtas „React“ programoms internacionalizuoti. Internacionalizavimas, dar žinomas kaip i18n, yra programos pritaikymo skirtingoms kalboms ir kultūroms procesas.

Galite lengvai palaikyti kelias kalbas ir lokales savo „React“ programoje naudodami „ReactIntl“.

Diegimas React Intl

Norėdami naudoti React Intl biblioteką, pirmiausia turite ją įdiegti. Tai galite padaryti su daugiau nei vienas paketų tvarkytuvas: npm, verpalai arba pnpm.

Norėdami jį įdiegti naudodami npm, savo terminale paleiskite šią komandą:

npm įdiegti react-intl

Norėdami jį įdiegti naudodami siūlą, paleiskite šią komandą:

verpalai pridėti react-intl

Kaip naudotis React Intl biblioteka

Įdiegę React Intl biblioteką, galite naudoti jos komponentus ir funkcijas savo programoje. „React Intl“ atlieka panašias funkcijas kaip JavaScript Intl API.

Kai kurie vertingi „React Intl“ bibliotekos siūlomi komponentai apima Suformatuotas pranešimas ir IntlProvider komponentai.

Komponentas „FormattedMessage“ rodo išverstas eilutes jūsų programoje, o „IntlProvider“ komponentas pateikia jūsų programai vertimus ir formatavimo informaciją.

Prieš pradėdami naudoti FormattedMessage ir IntlProvider komponentus programai versti, turite sukurti vertimo failą. Vertimo faile yra visi jūsų programos vertimai. Galite sukurti atskirus failus kiekvienai kalbai ir lokalei arba naudoti vieną failą, kuriame būtų visi vertimai.

Pavyzdžiui:

eksportuotikonst pranešimai prancūziškai = {
 sveikinimas: „Bonjour {name}“
}

eksportuotikonst pranešimai italų kalba = {
 sveikinimas: „Buongiorno {name}“
}

Šiame vertimo failo pavyzdyje yra du vertimo objektai: pranešimai prancūzų kalba ir pranešimai italų kalba. Galite pakeisti rezervuotąją vietą {vardas} viduje pasisveikinimas eilutę vykdymo metu su dinamine verte.

Norėdami naudoti vertimus programoje, turite apvynioti programos šakninį komponentą su IntlProvider komponentas. „IntlProvider“ komponentui reikia trijų Reaguoti rekvizitai: lokale, defaultLocale, ir žinutes.

Lokalės pasiūlymas priima eilutę, nurodančią vartotojo lokalę, o numatytoji lokalė nurodo atsarginę vietą, jei vartotojo pageidaujama lokalė nepasiekiama. Galiausiai pranešimų rekvizitas priima vertimo objektą.

Štai pavyzdys, rodantis, kaip galite naudoti „IntlProvider“:

importuoti Reaguoti iš"reaguoti";
importuoti ReactDOM iš„reaguoti/klientas“;
importuoti Programėlė iš"./Programa";
importuoti { IntlProvider } iš"react-intl";
importuoti { pranešimai prancūzų k. } iš"./vertimas";
ReactDOM.createRoot(dokumentas.getElementById("šaknis")).pateikti(

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

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

Šis pavyzdys praeina fr lokalė, pranešimai prancūzų kalba vertimas ir numatytasis lt lokale į IntlProvider komponentas.

Galite perduoti daugiau nei vieną lokalę arba vertimo objektą ir IntlProvider automatiškai aptiks vartotojo naršyklės kalbą ir naudos atitinkamus vertimus.

Norėdami savo programoje rodyti išverstas eilutes, naudokite Suformatuotas pranešimas komponentas. The Suformatuotas pranešimas komponentas užima an id rekvizitas, atitinkantis pranešimo ID objekte pranešimų.

Komponentas taip pat užima a numatytasis pranešimas ir vertybes prop. The numatytasis pranešimas prop nurodo atsarginį pranešimą, jei vertimas nepasiekiamas dabartinei lokalei, o vertybes prop pateikia dinamines vietos rezervavimo reikšmes jūsų išverstuose pranešimuose.

Pavyzdžiui:

importuoti Reaguoti iš"reaguoti";
importuoti { FormattedMessage } iš"react-intl";
funkcijaProgramėlė() {
grąžinti (




 id="sveikinimas"
 defaultMessage=„Labas rytas, {name}“
 vertės={{ vardas: "Jonas"}}
 />
 </p>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šiame kodo bloke id rekvizitas Suformatuotas pranešimas komponentas naudoja pasisveikinimas raktas nuo pranešimai prancūzų kalba objektas ir vertybes prop pakeičia {vardas} vietos rezervavimo vieta su reikšme „Jonas“.

Skaičių formatavimas naudojant FormattedNumber komponentą

„React Intl“ taip pat teikia FormattedNumber komponentas, kurį galite naudoti formatuodami skaičius pagal dabartinę lokalę. Komponentas priima įvairius rekvizitus, skirtus tinkinti formatavimą, pvz., stilių, valiutą ir mažiausią bei didžiausią trupmenos skaitmenis.

Štai keletas pavyzdžių:

importuoti Reaguoti iš"reaguoti";
importuoti { FormattedNumber } iš"react-intl";
funkcijaProgramėlė() {
grąžinti (




 Dešimtainė: <FormattedNumbervertė={123.456}stilius="dešimtainis" />
 </p>


 Procentai: <FormattedNumbervertė={123.456}stilius="procentas" />
 </p>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šiame pavyzdyje naudojama FormattedNumber komponentas, kuris priima a vertė prop nurodant numerį, kurį norite formatuoti.

Naudojant stilius prop, galite tinkinti suformatuoto numerio išvaizdą. Galite nustatyti stilius remti į dešimtainis, proc, arba valiuta.

Kai nustatote stilius rekvizitas valiutai, FormattedNumber komponentas formatuoja skaičių kaip valiutos vertę, naudodamas kodą, nurodytą valiuta rekvizitas:

importuoti Reaguoti iš"reaguoti";
importuoti { FormattedNumber } iš"react-intl";
funkcijaProgramėlė() {
grąžinti (




 Kaina: <FormattedNumbervertė={123.456}stilius="valiuta"valiuta="USD" />
 </p>
 </div>
 );
}
eksportuotinumatytas Programėlė;

The FormattedNumber komponentas formatuoja skaičių aukščiau esančiame kodo bloke, naudodamas valiuta stilius ir USD valiutos kodas.

Skaičius taip pat galite formatuoti tam tikru skaitmenų po kablelio skaičiumi naudodami minimumFractionDigs ir maksimalus trupmenos skaitmenys rekvizitai.

The minimumFractionDigs prop nurodo mažiausią rodomų trupmenos skaitmenų skaičių. Priešingai, maksimalus trupmenos skaitmenys prop nurodo maksimalų trupmenos skaitmenų skaičių.

Jei skaičius turi mažiau trupmenos skaitmenų nei nurodyta minimumFractionDigs, „React Intl“ įrašys jį nuliais. Jei skaičius turi daugiau trupmenos skaitmenų nei nurodyta maksimalus trupmenos skaitmenys, biblioteka suapvalins skaičių aukštyn.

Štai pavyzdys, rodantis, kaip galite naudoti šiuos rekvizitus:

importuoti Reaguoti iš"reaguoti";
importuoti { FormattedNumber } iš"react-intl";
funkcijaProgramėlė() {
grąžinti (




 value={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Datų formatavimas naudojant FormattedDate komponentą

Naudodami React Intl. galite formatuoti datas taip, kad jos būtų nuoseklios ir lengvai skaitomos. The FormattedDate komponentas suteikia paprastą ir efektyvų datų formatavimo būdą. Jis veikia panašiai kaip datos ir laiko bibliotekos, kurios formatuoja datas, pvz., Moment.js.

FormattedDate komponentas reikalauja daug rekvizitų, pvz vertė, dieną, mėnuo, ir metų. Reikšmės pasiūlymas priima datą, kurią norite formatuoti, o kiti rekvizitai konfigūruoja jos formatavimą.

Pavyzdžiui:

importuoti Reaguoti iš"reaguoti";
importuoti { FormattedDate } iš"react-intl";
funkcijaProgramėlė() {
konst šiandien = naujasData();
grąžinti (




 Šiandiendata yra
 vertė={šiandien}
 diena ="skaitinis"
 mėnuo ="ilgai"
 metai ="skaitinis"
 />
 </p>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Šiame pavyzdyje vertė prop naudoja dabartinę datą. Be to, naudojant dieną, mėnuo, ir metų rekvizitai, nurodote, kad metai, mėnuo ir diena būtų rodomi ilgu formatu.

Be dienos, mėnesio ir metų, kiti rekvizitai taip pat formuoja datos išvaizdą. Štai rekvizitai ir vertybės, kurias jie priima:

• metų: "skaitmenų", "2 skaitmenų"
• mėnuo: "skaitinis", "2 skaitmenų", "siauras", "trumpas", "ilgas"
• dieną: "skaitmenų", "2 skaitmenų"
• valandą: "skaitmenų", "2 skaitmenų"
• minutė: "skaitmenų", "2 skaitmenų"
• antra: "skaitmenų", "2 skaitmenų"
• timeZoneName: "trumpas ilgas"

Taip pat galite naudoti FormattedDate Formatavimo komponentas ir rodymo laikas:

importuoti Reaguoti iš"reaguoti";
importuoti { FormattedDate } iš"react-intl";
funkcijaProgramėlė() {
konst šiandien = naujasData();
grąžinti (




 Laikas yra
 vertė={šiandien}
 valanda ="skaitinis"
 minutė ="skaitinis"
 antra ="skaitinis"
 />
 </p>
 </div>
 );
}
eksportuotinumatytas Programėlė;

Internacionalizuokite savo „React“ paraiškas platesnei auditorijai

Sužinojote, kaip įdiegti ir nustatyti React-Intl biblioteką savo React programoje. „React-intl“ leidžia lengvai formatuoti „React“ programos numerius, datas ir valiutas. Galite formatuoti duomenis pagal vartotojo lokalę naudodami komponentus FormattedMessage, FormattedNumber ir FormattedDate.

„React“ kūrėjai dažnai daro klaidų, kurios gali sukelti rimtų pasekmių. Pavyzdžiui, nepavyksta tinkamai atnaujinti būsenos. Svarbu žinoti apie šias įprastas klaidas ir anksti jas ištaisyti, kad išvengtumėte brangių problemų.