Pre čo najširšie publikum by vaša aplikácia mala komunikovať v rôznych jazykoch. Zistite, ako urobiť túto úlohu menej skľučujúcou.
React Intl je populárna knižnica, ktorá poskytuje sadu komponentov a nástrojov na internacionalizáciu aplikácií React. Internacionalizácia, tiež známa ako i18n, je proces prispôsobenia aplikácie rôznym jazykom a kultúram.
Pomocou ReactIntl môžete vo svojej aplikácii React jednoducho podporovať viaceré jazyky a miestne nastavenia.
Inštalácia React Intl
Ak chcete používať knižnicu React Intl, musíte ju najskôr nainštalovať. Môžete to urobiť pomocou viac ako jeden správca balíkov: npm, priadza alebo pnpm.
Ak ho chcete nainštalovať pomocou npm, spustite tento príkaz vo svojom termináli:
npm install reagovat-intl
Ak ho chcete nainštalovať pomocou priadze, spustite tento príkaz:
priadza pridať reakt-intl
Ako používať React Intl Library
Po nainštalovaní knižnice React Intl môžete vo svojej aplikácii používať jej súčasti a funkcie. React Intl má podobné funkcie ako JavaScript Intl API.
Niektoré cenné komponenty, ktoré ponúka knižnica React Intl, zahŕňajú Formátovaná správa a IntlProvider komponentov.
Komponent FormattedMessage zobrazuje preložené reťazce vo vašej aplikácii, zatiaľ čo komponent IntlProvider poskytuje preklady a informácie o formátovaní vašej aplikácii.
Pred použitím komponentov FormattedMessage a IntlProvider na preklad vašej aplikácie musíte vytvoriť prekladový súbor. Prekladový súbor obsahuje všetky preklady pre vašu aplikáciu. Môžete vytvoriť samostatné súbory pre každý jazyk a miestne nastavenie alebo použiť jeden súbor, ktorý bude obsahovať všetky preklady.
Napríklad:
exportkonšt správy vo francúzštine = {
pozdrav: "Bonjour {name}"
}
exportkonšt správy v taliančine = {
pozdrav: "Buongiorno {name}"
}
Tento vzorový prekladový súbor obsahuje dva prekladové objekty: správy vo francúzštine a správy v taliančine. Zástupný znak môžete nahradiť {názov} v pozdrav reťazec za behu s dynamickou hodnotou.
Ak chcete použiť preklady vo svojej aplikácii, musíte koreňový komponent vašej aplikácie zabaliť do IntlProvider komponent. Komponent IntlProvider trvá tri Reagovať rekvizity: locale, defaultLocale, a správy.
Podpora miestneho nastavenia akceptuje reťazec, ktorý špecifikuje miestne nastavenie používateľa, zatiaľ čo parameter defaultLocale určuje záložné nastavenie, ak preferované miestne nastavenie používateľa nie je k dispozícii. Nakoniec podpera správ akceptuje objekt prekladu.
Tu je príklad, ktorý ukazuje, ako môžete používať IntlProvider:
importovať Reagovať od"reagovať";
importovať ReactDOM od"react-dom/client";
importovať App od"./App";
importovať { IntlProvider } od"react-intl";
importovať { messagesInfrancúzština } od"./preklad";
ReactDOM.createRoot(dokument.getElementById("koreň")).vykresliť("fr" messages={messagesInFrench} defaultLocale="sk">
</IntlProvider>
</React.StrictMode>
);
Tento príklad prechádza fr miestne nastavenie, správy vo francúzštine preklad a predvolená hodnota en miestne nastavenie IntlProvider komponent.
Môžete odovzdať viac ako jedno miestne nastavenie alebo objekt prekladu a IntlProvider automaticky zistí jazyk prehliadača používateľa a použije príslušné preklady.
Ak chcete zobraziť preložené reťazce vo svojej aplikácii, použite Formátovaná správa komponent. The Formátovaná správa komponent berie an id prop zodpovedajúce ID správy v objekte správy.
Komponent tiež berie a defaultMessage a hodnoty rekvizita. The defaultMessage prop špecifikuje záložnú správu, ak preklad nie je dostupný pre aktuálne miestne nastavenie, zatiaľ čo hodnoty prop poskytuje dynamické hodnoty pre zástupné symboly vo vašich preložených správach.
Napríklad:
importovať Reagovať od"reagovať";
importovať { FormattedMessage } od"react-intl";funkciuApp() {
vrátiť (
id="pozdrav"
defaultMessage="Dobré ráno {name}"
hodnoty={{ názov: 'John'}}
/>
</p>
</div>
);
}
exportpredvolená App;
V tomto bloku kódu je id opora z Formátovaná správa komponent používa pozdrav kľúč od správy vo francúzštine objekt a hodnoty rekvizita nahrádza {názov} zástupný symbol s hodnotou „Ján“.
Formátovanie čísel pomocou komponentu FormattedNumber
React Intl tiež poskytuje FormattedNumber komponent, ktorý môžete použiť na formátovanie čísel na základe aktuálneho miestneho nastavenia. Komponent akceptuje rôzne rekvizity na prispôsobenie formátovania, ako je štýl, mena a minimálny a maximálny počet zlomkov.
Tu je niekoľko príkladov:
importovať Reagovať od"reagovať";
importovať { FormattedNumber } od"react-intl";funkciuApp() {
vrátiť (
Desatinné: <FormattedNumberhodnotu={123.456}štýl="desiatkové" />
</p>
Percento: <FormattedNumberhodnotu={123.456}štýl="percentá" />
</p>
</div>
);
}
exportpredvolená App;
Tento príklad používa FormattedNumber komponent, ktorý prijíma a hodnotu prop s uvedením čísla, ktoré chcete formátovať.
Pomocou štýl rekvizity, môžete prispôsobiť vzhľad formátovaného čísla. Môžete nastaviť štýl podoprieť sa desiatkový, percent, alebo mena.
Keď nastavíte štýl podpora meny, FormattedNumber komponent naformátuje číslo ako hodnotu meny pomocou kódu špecifikovaného v mena podpera:
importovať Reagovať od"reagovať";
importovať { FormattedNumber } od"react-intl";funkciuApp() {
vrátiť (
Cena: <FormattedNumberhodnotu={123.456}štýl="mena"mena="AMERICKÝ DOLÁR" />
</p>
</div>
);
}
exportpredvolená App;
The FormattedNumber komponent naformátuje číslo v bloku kódu vyššie pomocou mena štýl a Americký dolár kód meny.
Môžete tiež formátovať čísla s konkrétnym počtom desatinných miest pomocou minimumFractionDigits a maximumFractionDigits rekvizity.
The minimumFractionDigits prop určuje minimálny počet zlomkových číslic na zobrazenie. Na rozdiel od toho, maximumFractionDigits prop určuje maximálny počet zlomkových číslic.
Ak má číslo menej zlomkových číslic, ako je zadané minimumFractionDigits, React Intl ho doplní nulami. Ak má číslo viac zlomkových číslic, ako je zadané maximumFractionDigits, knižnica zaokrúhli číslo nahor.
Tu je príklad, ktorý ukazuje, ako môžete použiť tieto rekvizity:
importovať Reagovať od"reagovať";
importovať { FormattedNumber } od"react-intl";funkciuApp() {
vrátiť (
hodnota={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}
exportpredvolená App;
Formátovanie dátumov pomocou komponentu FormattedDate
Dátumy môžete formátovať konzistentným a ľahko čitateľným spôsobom pomocou React Intl. The Formátovaný dátum poskytuje jednoduchý a efektívny spôsob formátovania dátumov. Funguje to podobne ako knižnice dátumu a času, ktoré formátujú dátumy, ako napríklad Moment.js.
Komponent FormattedDate preberá mnoho rekvizít, ako napr hodnotu, deň, mesiac, a rok. Hodnota prop akceptuje dátum, ktorý chcete formátovať, a ostatné prop konfigurujú jeho formátovanie.
Napríklad:
importovať Reagovať od"reagovať";
importovať { FormattedDate } od"react-intl";funkciuApp() {
konšt dnes = NovýDátum();vrátiť (
Dnesdátum je
value={today}
deň ="numerický"
mesiac ="dlhá"
rok ="numerický"
/>
</p>
</div>
);
}
exportpredvolená App;
V tomto príklade hodnotu prop používa aktuálny dátum. Tiež pomocou deň, mesiac, a rok rekvizity, určíte, že chcete, aby sa rok, mesiac a deň zobrazovali v dlhom formáte.
Popri dni, mesiaci a roku formátujú vzhľad dátumu aj iné rekvizity. Tu sú rekvizity a hodnoty, ktoré akceptujú:
- rok: "numerický", "2-miestny"
- mesiac: "numerický", "2-miestny", "úzky", "krátky", "dlhý"
- deň: "numerický", "2-miestny"
- hodina: "numerický", "2-miestny"
- minútu: "numerický", "2-miestny"
- druhý: "numerický", "2-miestny"
- timeZoneName: "krátko dlho"
Môžete tiež použiť Formátovaný dátum komponent na formátovanie a zobrazenie času:
importovať Reagovať od"reagovať";
importovať { FormattedDate } od"react-intl";funkciuApp() {
konšt dnes = NovýDátum();vrátiť (
Čas je
value={today}
hodina ="numerický"
minúta ="numerický"
druhý ="numerický"
/>
</p>
</div>
);
}
exportpredvolená App;
Internacionalizujte svoje aplikácie React pre širšie publikum
Naučili ste sa, ako nainštalovať a nastaviť knižnicu React-Intl v aplikácii React. React-intl uľahčuje formátovanie čísel, dátumov a mien vašej aplikácie React. Údaje môžete formátovať na základe miestneho nastavenia používateľa pomocou komponentov FormattedMessage, FormattedNumber a FormattedDate.
Vývojári React často robia chyby, ktoré môžu viesť k vážnym následkom. Napríklad nesprávna aktualizácia stavu. Je dôležité si uvedomiť tieto bežné chyby a včas ich opraviť, aby ste sa vyhli nákladným problémom.