A lehető legszélesebb közönség érdekében az alkalmazásnak számos nyelven kell kommunikálnia. Ismerje meg, hogyan teheti ezt a feladatot kevésbé ijesztővé.
A React Intl egy népszerű könyvtár, amely egy sor összetevőt és segédprogramot biztosít a React alkalmazások nemzetközivé tételéhez. A nemzetköziesítés, más néven i18n, egy alkalmazás különböző nyelvekhez és kultúrákhoz való adaptálásának folyamata.
A ReactIntl segítségével könnyedén támogathat több nyelvet és területi beállítást a React alkalmazásban.
A React Intl
A React Intl könyvtár használatához először telepítenie kell azt. Ezzel megteheti egynél több csomagkezelő: npm, fonal vagy pnpm.
Az npm-mel történő telepítéshez futtassa ezt a parancsot a terminálon:
npm install react-intl
A fonal használatával történő telepítéshez futtassa ezt a parancsot:
fonal add react-intl
A React Intl Library használata
Miután telepítette a React Intl könyvtárat, használhatja annak összetevőit és szolgáltatásait az alkalmazásban. A React Intl hasonló funkciókkal rendelkezik, mint a JavaScript Intl API.
A React Intl könyvtár által kínált értékes összetevők közé tartozik a FormattedMessage és IntlProvider alkatrészek.
A FormattedMessage összetevő lefordított karakterláncokat jelenít meg az alkalmazásban, míg az IntlProvider összetevő biztosítja a fordításokat és a formázási információkat az alkalmazás számára.
Létre kell hoznia egy fordítási fájlt, mielőtt elkezdené használni a FormattedMessage és az IntlProvider összetevőket az alkalmazás fordításához. Egy fordítási fájl tartalmazza az alkalmazáshoz tartozó összes fordítást. Létrehozhat külön fájlokat minden nyelvhez és területi beállításhoz, vagy használhat egyetlen fájlt az összes fordítás tárolására.
Például:
exportconst üzenetekfrancia = {
üdvözlet: "Bonjour {name}"
}
exportconst üzenetek olaszul = {
üdvözlet: "Buongiorno {name}"
}
Ez a példa fordítási fájl két fordítási objektumot tartalmaz: üzenetek francia nyelven és üzenetek olaszul. Lecserélheti a helyőrzőt {név} ban,-ben üdvözlet karakterlánc futás közben dinamikus értékkel.
A fordítások alkalmazásában való használatához az alkalmazás gyökérkomponensét be kell csomagolnia a IntlProvider összetevő. Az IntlProvider komponensnek háromra van szüksége React kellékek: locale, defaultLocale, és üzenetek.
A területi beállítási javaslat elfogad egy karakterláncot, amely megadja a felhasználó területi beállítását, míg a defaultLocale egy tartalékot ad meg, ha a felhasználó preferált területi beállítása nem érhető el. Végül az üzenetek támasztéka elfogad egy fordítási objektumot.
Íme egy példa az IntlProvider használatára:
import Reagál tól től"reagál";
import ReactDOM tól től"react-dom/kliens";
import App tól től"./App";
import { IntlProvider } tól től"react-intl";
import { üzenetek francia nyelven } tól től"./fordítás";
ReactDOM.createRoot(dokumentum.getElementById("gyökér")).Vakol("fr" messages={messagesInFrench} defaultLocale="en">
</IntlProvider>
</React.StrictMode>
);
Ez a példa átmegy a fr locale, a üzenetek francia nyelven fordítás, és egy alapértelmezett hu területi beállítása a IntlProvider összetevő.
Egynél több területi beállítást vagy fordítási objektumot is átadhat, és a IntlProvider automatikusan felismeri a felhasználó böngészőjének nyelvét, és a megfelelő fordításokat használja.
A lefordított karakterláncok megjelenítéséhez az alkalmazásban használja a FormattedMessage összetevő. A FormattedMessage komponens vesz egy id prop megfelel egy üzenetazonosítónak az üzenetobjektumban.
Az alkatrész is vesz a alapértelmezett Üzenet és értékeket támaszt. A alapértelmezett Üzenet prop megad egy tartalék üzenetet, ha a fordítás nem érhető el az aktuális területi beállításhoz, míg a értékeket A prop dinamikus értékeket biztosít a lefordított üzenetek helyőrzői számára.
Például:
import Reagál tól től"reagál";
import { FormattedMessage } tól től"react-intl";funkcióApp() {
Visszatérés (
id="üdvözlet"
defaultMessage="Jó reggelt, {name}"
értékek={{ név: 'János'}}
/>
</p>
</div>
);
}
exportalapértelmezett App;
Ebben a kódblokkban a id kelléke a FormattedMessage komponens használja a üdvözlet kulcs a üzenetek francia nyelven objektum, és a értékeket prop helyettesíti a {név} helyőrző "János" értékkel.
Számok formázása a FormattedNumber komponenssel
A React Intl is biztosítja a FormattedNumber komponens, amellyel számokat formázhat az aktuális területi beállítás alapján. A komponens különféle kellékeket fogad el a formázás testreszabásához, mint például a stílus, a pénznem, valamint a minimális és maximális törtszámjegyek.
Íme néhány példa:
import Reagál tól től"reagál";
import { FormattedNumber } tól től"react-intl";funkcióApp() {
Visszatérés (
Decimális: <FormattedNumberérték={123.456}stílus="decimális" />
</p>
Százalék: <FormattedNumberérték={123.456}stílus="százalék" />
</p>
</div>
);
}
exportalapértelmezett App;
Ez a példa a FormattedNumber komponens, amely elfogadja a érték prop megadja a formázni kívánt számot.
Használni a stílus prop, testreszabhatja a formázott szám megjelenését. Beállíthatja a stílus támaszt decimális, százalék, vagy valuta.
Amikor beállítja a stílus kellék a valutához, a FormattedNumber komponens a számot pénznemként formázza a -ban megadott kód segítségével valuta támaszt:
import Reagál tól től"reagál";
import { FormattedNumber } tól től"react-intl";funkcióApp() {
Visszatérés (
Ár: <FormattedNumberérték={123.456}stílus="valuta"valuta="USADOLLÁR" />
</p>
</div>
);
}
exportalapértelmezett App;
A FormattedNumber komponens formázza a számot a fenti kódblokkban a segítségével valuta stílus és a usadollár pénznem kód.
A számokat meghatározott számú tizedesjegyekkel is formázhatja a segítségével minimumFractionDigits és maximumFractionDigits kellékek.
A minimumFractionDigits A prop megadja a megjelenítendő törtszámjegyek minimális számát. Ezzel szemben a maximumFractionDigits A prop megadja a tört számjegyek maximális számát.
Ha egy szám a megadottnál kevesebb tört számjegyből áll minimumFractionDigits, A React Intl nullákkal tölti fel. Ha a szám a megadottnál több tört számjegyből áll maximumFractionDigits, a könyvtár felfelé kerekíti a számot.
Íme egy példa, amely bemutatja, hogyan használhatja ezeket a kellékeket:
import Reagál tól től"reagál";
import { FormattedNumber } tól től"react-intl";funkcióApp() {
Visszatérés (
érték={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}
exportalapértelmezett App;
Dátumok formázása a FormattedDate komponenssel
A dátumokat konzisztens és könnyen olvasható módon formázhatja a React Intl. A FormattedDate komponens egyszerű és hatékony módot biztosít a dátumok formázására. Hasonlóan működik, mint dátum-idő könyvtárak, amelyek formázzák a dátumokat, például a Moment.js.
A FormattedDate komponens sok kelléket igényel, mint pl érték, nap, hónap, és év. Az értékprop elfogadja a formázni kívánt dátumot, a többi paraméter pedig konfigurálja a formázást.
Például:
import Reagál tól től"reagál";
import { FormattedDate } tól től"react-intl";funkcióApp() {
const ma = újDátum();Visszatérés (
Maa dátum az
érték={ma}
nap ="numerikus"
hónap ="hosszú"
év ="numerikus"
/>
</p>
</div>
);
}
exportalapértelmezett App;
Ebben a példában a érték A prop az aktuális dátumot használja. Továbbá, a nap, hónap, és év kellékek, megadhatja, hogy az évet, hónapot és napot hosszú formátumban kívánja megjeleníteni.
A nap, hónap és év mellett más kellékek is formálják a dátum megjelenését. Íme a kellékek és az általuk elfogadott értékek:
- év: "numerikus", "2 számjegyű"
- hónap: "numerikus", "2 számjegyű", "keskeny", "rövid", "hosszú"
- nap: "numerikus", "2 számjegyű"
- óra: "numerikus", "2 számjegyű"
- perc: "numerikus", "2 számjegyű"
- második: "numerikus", "2 számjegyű"
- timeZoneName: "rövid hosszú"
Használhatja a FormattedDate komponens a formázáshoz és a megjelenítési időhöz:
import Reagál tól től"reagál";
import { FormattedDate } tól től"react-intl";funkcióApp() {
const ma = újDátum();Visszatérés (
Az idő
érték={ma}
óra ="numerikus"
perc ="numerikus"
második="numerikus"
/>
</p>
</div>
);
}
exportalapértelmezett App;
Tegye nemzetközivé React jelentkezéseit szélesebb közönség számára
Megtanulta, hogyan kell telepíteni és beállítani a React-Intl könyvtárat a React alkalmazásban. A React-intl megkönnyíti a React alkalmazás számainak, dátumainak és pénznemeinek formázását. A FormattedMessage, a FormattedNumber és a FormattedDate összetevőkkel a felhasználó területi beállításai alapján formázhatja az adatokat.
A React fejlesztői gyakran követnek el hibákat, amelyek súlyos következményekkel járhatnak. Például az állapot frissítésének elmulasztása. Fontos, hogy tisztában legyünk ezekkel a gyakori hibákkal, és korán kijavítsuk őket, hogy elkerüljük a költséges problémákat.
