React Intl je oblíbená knihovna, která poskytuje sadu komponent a nástrojů pro internacionalizaci aplikací React. Internacionalizace, známá také jako i18n, je proces přizpůsobení aplikace různým jazykům a kulturám.
S ReactIntl můžete snadno podporovat více jazyků a lokalit ve vaší aplikaci React.
Table of Contents
Instalace React Intl
Chcete-li používat knihovnu React Intl, musíte ji nejprve nainstalovat. Můžete to udělat s více než jedním správcem balíčků: npm, yarn nebo pnpm.
Chcete-li jej nainstalovat pomocí npm, spusťte tento příkaz ve svém terminálu:
npm install react-intl
Chcete-li jej nainstalovat pomocí příze, spusťte tento příkaz:
yarn add react-intl
Jak používat React Intl Library
Jakmile nainstalujete knihovnu React Intl, můžete ve své aplikaci používat její součásti a funkce. React Intl má podobné funkce jako JavaScript Intl API.
Některé cenné komponenty nabízené knihovnou React Intl zahrnují komponenty FormattedMessage a IntlProvider.
Komponenta FormattedMessage zobrazuje přeložené řetězce ve vaší aplikaci, zatímco komponenta IntlProvider poskytuje překlady a informace o formátování vaší aplikaci.
Než budete moci začít používat komponenty FormattedMessage a IntlProvider k překladu aplikace, musíte vytvořit soubor překladu. Překladový soubor obsahuje všechny překlady pro vaši aplikaci. Můžete vytvořit samostatné soubory pro každý jazyk a národní prostředí nebo použít jeden soubor, který bude obsahovat všechny překlady.
Například:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Tento ukázkový překladový soubor obsahuje dva objekty překladu: messagesInFrench a messagesInItalian. Zástupný symbol {name} v pozdravném řetězci můžete za běhu nahradit dynamickou hodnotou.
Chcete-li použít překlady ve své aplikaci, musíte kořenovou komponentu aplikace zabalit do komponenty IntlProvider. Komponenta IntlProvider má tři rekvizity React: národní prostředí, defaultLocale a zprávy.
Prop locale přijímá řetězec, který určuje národní prostředí uživatele, zatímco defaultLocale určuje nouzový režim, pokud je preferované národní prostředí uživatele nedostupné. Nakonec podpěra zpráv přijímá objekt překladu.
Zde je příklad ukazující, jak můžete používat IntlProvider:
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>
);
Tento příklad předává národní prostředí fr, překlad messagesInFrench a výchozí národní prostředí en do komponenty IntlProvider.
Můžete předat více než jedno národní prostředí nebo objekt překladu a IntlProvider automaticky rozpozná jazyk prohlížeče uživatele a použije vhodné překlady.
Chcete-li zobrazit přeložené řetězce ve vaší aplikaci, použijte komponentu FormattedMessage. Komponenta FormattedMessage přebírá prop id odpovídající ID zprávy v objektu zpráv.
Komponenta také přebírá výchozí zprávu a hodnoty prop. Prop defaultMessage určuje nouzovou zprávu, pokud překlad není pro aktuální národní prostředí dostupný, zatímco prop values poskytuje dynamické hodnoty pro zástupné symboly ve vašich přeložených zprávách.
Například:
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;
V tomto bloku kódu používá prop id komponenty FormattedMessage klíč pozdravu z objektu messagesInFrench a hodnoty prop nahradí zástupný symbol {name} hodnotou „John“.
Formátování čísel pomocí komponenty FormattedNumber
React Intl také poskytuje komponentu FormattedNumber, kterou můžete použít k formátování čísel na základě aktuálního národního prostředí. Komponenta přijímá různé rekvizity pro přizpůsobení formátování, jako je styl, měna a minimální a maximální zlomkové číslice.
Zde jsou nějaké příklady:
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;
Tento příklad používá komponentu FormattedNumber, která přijímá hodnotu prop určující číslo, které chcete formátovat.
Pomocí podpěry stylu můžete upravit vzhled formátovaného čísla. Můžete nastavit podporu stylu na desítkové, procento nebo měnu.
Když nastavíte podporu stylu na měnu, komponenta FormattedNumber naformátuje číslo jako hodnotu měny pomocí kódu určeného v propážce měny:
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;
Komponenta FormattedNumber formátuje číslo v bloku kódu výše pomocí stylu měny a kódu měny USD.
Můžete také formátovat čísla s určitým počtem desetinných míst pomocí rekvizit minimumFractionDigits a maximumFractionDigits.
Prop minimumFractionDigits určuje minimální počet zobrazených číslic zlomku. Naproti tomu prop maximumFractionDigits určuje maximální počet zlomkových číslic.
Pokud má číslo méně desetinných míst, než je zadaný minimální počet zlomků, React Intl jej doplní nulami. Pokud má číslo více desetinných míst, než je zadané maximumFractionDigits, knihovna číslo zaokrouhlí nahoru.
Zde je příklad ukazující, jak můžete tyto rekvizity použít:
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;
Formátování dat pomocí komponenty FormattedDate
Data můžete formátovat způsobem, který je konzistentní a snadno čitelný pomocí React Intl. Komponenta FormattedDate poskytuje jednoduchý a efektivní způsob formátování dat. Funguje podobně jako knihovny data-čas, které formátují data, jako je Moment.js.
Komponenta FormattedDate vyžaduje mnoho rekvizit, jako je hodnota, den, měsíc a rok. Hodnota prop přijímá datum, které chcete formátovat, a ostatní prop konfigurují jeho formátování.
Například:
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;
V tomto příkladu hodnota prop používá aktuální datum. Pomocí rekvizit den, měsíc a rok také určíte, že chcete, aby se rok, měsíc a den zobrazovaly v dlouhém formátu.
Kromě dne, měsíce a roku formátují vzhled data i další rekvizity. Zde jsou rekvizity a hodnoty, které akceptují:
- rok: „numerický“, „2-místný“
- měsíc: „numerický“, „2místný“, „úzký“, „krátký“, „dlouhý“
- den: „numerický“, „2-místný“
- hodina: „numerický“, „2-místný“
- minuta: „numerický“, „2-místný“
- druhý: „numerický“, „2-místný“
- timeZoneName: „short“, „long“
K formátování a zobrazení času můžete také použít komponentu FormattedDate:
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;
Internacionalizujte své aplikace React pro širší publikum
Naučili jste se, jak nainstalovat a nastavit knihovnu React-Intl ve vaší aplikaci React. React-intl usnadňuje formátování čísel, dat a měn vaší aplikace React. Data můžete formátovat na základě národního prostředí uživatele pomocí komponent FormattedMessage, FormattedNumber a FormattedDate.
Vývojáři React často dělají chyby, které mohou vést k vážným následkům. Například nesprávná aktualizace stavu. Je důležité si být vědom těchto běžných chyb a včas je napravit, abyste se vyhnuli nákladným problémům.