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.
Tartalomjegyzék
A React Intl
A React Intl könyvtár használatához először telepítenie kell azt. Ezt több csomagkezelővel is megteheti: npm, yarn 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:
yarn 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 az IntlProvider összetevő.
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:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Ez a példa fordítási fájl két fordítási objektumot tartalmaz: messagesInfranch és messagesInolasz. Futás közben lecserélheti a {name} helyőrzőt az üdvözlő karakterláncban egy dinamikus értékre.
A fordítások alkalmazásában való használatához az alkalmazás gyökérkomponensét be kell csomagolnia az IntlProvider komponensbe. Az IntlProvider összetevő három React-tapasztalatot vesz igénybe: locale, defaultLocale és messages.
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 React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { IntlProvider } from "react-intl";
import { messagesInFrench } from "./translation";ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<IntlProvider locale="fr" messages={messagesInFrench} defaultLocale="en">
<App />
</IntlProvider>
</React.StrictMode>
);
Ez a példa átadja az fr területi beállítást, a messagesInfranch fordítást és egy alapértelmezett en területi beállítást az IntlProvider összetevőnek.
Egynél több területi beállítást vagy fordítási objektumot is átadhat, és az 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őt. A FormattedMessage összetevő az üzenetobjektumban lévő üzenetazonosítónak megfelelő azonosítót vesz fel.
A komponens egy alapértelmezett Üzenetet is vesz, és értékek prop. A defaultMessage prop tartalék üzenetet ad meg, ha a fordítás nem érhető el az aktuális területi beállításhoz, míg az értékek prop dinamikus értékeket biztosít a lefordított üzenetek helyőrzői számára.
Például:
import React from "react";
import { FormattedMessage } from "react-intl";function App() {
return (
<div>
<p>
<FormattedMessage
id="greeting"
defaultMessage="Good morning {name}"
values={{ name: 'John'}}
/>
</p>
</div>
);
}export default App;
Ebben a kódblokkban a FormattedMessage összetevő id propja a messagesInFrench objektum üdvözlőkulcsát használja, és a prop értékek a {name} helyőrzőt „János” értékre cserélik.
Számok formázása a FormattedNumber komponenssel
A React Intl a FormattedNumber összetevőt is biztosítja, amellyel a számokat az aktuális területi beállítás alapján formázhatja. 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 React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Decimal: <FormattedNumber value={123.456} style="decimal" />
</p>
<p>
Percent: <FormattedNumber value={123.456} style="percent" />
</p>
</div>
);
}export default App;
Ez a példa a FormattedNumber összetevőt használja, amely elfogad egy értékprofilt, amely megadja a formázni kívánt számot.
A stílusprofil segítségével testreszabhatja a formázott szám megjelenését. A stílust tizedesjegyre, százalékra vagy pénznemre állíthatja.
Amikor a stílusprognózist pénznemre állítja, a FormattedNumber összetevő a számot pénznemértékként formázza a pénznemre vonatkozó kóddal:
import React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
Price: <FormattedNumber value={123.456} style="currency" currency="USD" />
</p>
</div>
);
}export default App;
A FormattedNumber összetevő a fenti kódblokkban lévő számot a pénznemstílus és az USD pénznemkód használatával formázza.
A minimumFractionDigits és maximumFractionDigits kellékek segítségével meghatározott számú tizedesjegyet tartalmazó számokat is formázhat.
A minimumFractionDigits prop megadja a megjelenítendő törtszámjegyek minimális számát. Ezzel szemben a maximumFractionDigits prop a törtszámjegyek maximális számát adja meg.
Ha egy szám kevesebb tört számjegyből áll, mint a megadott minimális FractionDigits, a React Intl nullákkal tölti fel. Ha a szám több tört számjegyet tartalmaz, mint a megadott 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 React from "react";
import { FormattedNumber } from "react-intl";function App() {
return (
<div>
<p>
<FormattedNumber
value={123.4567}
minimumFractionDigits={2}
maximumFractionDigits={3}
/>
</p>
</div>
);
}export default 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 összetevő egyszerű és hatékony módot biztosít a dátumok formázására. Hasonlóan működik, mint a dátumokat formázó dátum-idő könyvtárak, például a Moment.js.
A FormattedDate összetevő számos tulajdonságot igényel, például értéket, napot, hónapot és évet. 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 React from "react";
import { FormattedDate } from "react-intl";function App() {
const today = new Date();return (
<div>
<p>
Today's date is
<FormattedDate
value={today}
day="numeric"
month="long"
year="numeric"
/>
</p>
</div>
);
}export default App;
Ebben a példában a prop érték az aktuális dátumot használja. Ezenkívül a nap, hónap és év kellékek használatával 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: „short”, „long”
A FormattedDate összetevővel formázhatja és megjelenítheti az időt is:
import React from "react";
import { FormattedDate } from "react-intl";function App() {
const today = new Date();return (
<div>
<p>
The time is
<FormattedDate
value={today}
hour="numeric"
minute="numeric"
second="numeric"
/>
</p>
</div>
);
}export default 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.