React Intl to popularna biblioteka, która zapewnia zestaw komponentów i narzędzi do internacjonalizacji aplikacji React. Internacjonalizacja, znana również jako i18n, to proces dostosowywania aplikacji do różnych języków i kultur.
Możesz łatwo obsługiwać wiele języków i lokalizacji w swojej aplikacji React za pomocą ReactIntl.
Spis treści:
Instalowanie React Intl
Aby korzystać z biblioteki React Intl, musisz ją najpierw zainstalować. Możesz to zrobić za pomocą więcej niż jednego menedżera pakietów: npm, przędzy lub pnpm.
Aby zainstalować go za pomocą npm, uruchom to polecenie w swoim terminalu:
npm install react-intl
Aby zainstalować go za pomocą przędzy, uruchom to polecenie:
yarn add react-intl
Jak korzystać z biblioteki React Intl
Po zainstalowaniu biblioteki React Intl możesz używać jej komponentów i funkcji w swojej aplikacji. React Intl ma podobne funkcje do JavaScript Intl API.
Niektóre wartościowe komponenty oferowane przez bibliotekę React Intl obejmują komponenty FormattedMessage i IntlProvider.
Składnik FormattedMessage wyświetla przetłumaczone ciągi w Twojej aplikacji, podczas gdy składnik IntlProvider dostarcza informacje o tłumaczeniach i formatowaniu do Twojej aplikacji.
Zanim zaczniesz używać składników FormattedMessage i IntlProvider do tłumaczenia aplikacji, musisz utworzyć plik tłumaczenia. Plik tłumaczeń zawiera wszystkie tłumaczenia dla Twojej aplikacji. Możesz utworzyć osobne pliki dla każdego języka i lokalizacji lub użyć jednego pliku do przechowywania wszystkich tłumaczeń.
Na przykład:
export const messagesInFrench = {
greeting: "Bonjour {name}"
}
export const messagesInItalian = {
greeting: "Buongiorno {name}"
}
Ten przykładowy plik tłumaczenia zawiera dwa obiekty tłumaczenia: messageInFrench i messageInItalian. Możesz zastąpić symbol zastępczy {name} w ciągu powitania w czasie wykonywania wartością dynamiczną.
Aby korzystać z tłumaczeń w aplikacji, należy opakować główny składnik aplikacji ze składnikiem IntlProvider. Komponent IntlProvider pobiera trzy właściwości React: ustawienia regionalne, domyślne ustawienia regionalne i komunikaty.
Właściwość locale akceptuje ciąg określający ustawienia regionalne użytkownika, podczas gdy defaultLocale określa rezerwę, jeśli preferowane ustawienia regionalne użytkownika są niedostępne. Na koniec właściwość message akceptuje obiekt tłumaczenia.
Oto przykład pokazujący, jak możesz użyć 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>
);
Ten przykład przekazuje ustawienia regionalne fr, tłumaczenie komunikatów w języku francuskim i domyślne ustawienia regionalne en do składnika IntlProvider.
Możesz przekazać więcej niż jeden obiekt ustawień regionalnych lub tłumaczenia, a IntlProvider automatycznie wykryje język przeglądarki użytkownika i użyje odpowiednich tłumaczeń.
Aby wyświetlić przetłumaczone ciągi znaków w aplikacji, użyj komponentu FormattedMessage. Komponent FormattedMessage pobiera właściwość id odpowiadającą identyfikatorowi wiadomości w obiekcie wiadomości.
Komponent przyjmuje również właściwość defaultMessage i values. Właściwość defaultMessage określa wiadomość zastępczą, jeśli tłumaczenie jest niedostępne dla bieżącej lokalizacji, podczas gdy właściwość values zapewnia dynamiczne wartości symboli zastępczych w przetłumaczonych wiadomościach.
Na przykład:
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;
W tym bloku kodu właściwość id komponentu FormattedMessage używa klucza powitania z obiektu messageInFrench, a właściwość values zastępuje symbol zastępczy {name} wartością „John”.
Formatowanie liczb za pomocą komponentu FormattedNumber
React Intl udostępnia również komponent FormattedNumber, którego można użyć do formatowania liczb w oparciu o bieżące ustawienia regionalne. Komponent akceptuje różne rekwizyty w celu dostosowania formatowania, takie jak styl, waluta oraz minimalne i maksymalne cyfry ułamkowe.
Oto kilka przykładów:
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;
W tym przykładzie użyto komponentu FormattedNumber, który akceptuje właściwość określającą liczbę, którą chcesz sformatować.
Korzystając z rekwizytu stylu, możesz dostosować wygląd sformatowanej liczby. Możesz ustawić rekwizyt stylu na dziesiętny, procentowy lub walutowy.
Gdy właściwość stylu zostanie ustawiona na walutę, składnik FormattedNumber formatuje liczbę jako wartość waluty przy użyciu kodu określonego we właściwości waluty:
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;
Składnik FormattedNumber formatuje liczbę w powyższym bloku kodu przy użyciu stylu waluty i kodu waluty USD.
Liczby można również formatować z określoną liczbą miejsc dziesiętnych, używając właściwości minimumFractionDigits i MaximumFractionDigits.
Właściwość minimumFractionDigits określa minimalną liczbę cyfr ułamkowych do wyświetlenia. Natomiast właściwość maximumFractionDigits określa maksymalną liczbę cyfr ułamkowych.
Jeśli liczba ma mniej cyfr ułamkowych niż określone minimumFractionDigits, React Intl uzupełni ją zerami. Jeśli liczba ma więcej cyfr ułamkowych niż określona maksymalna wartość FractionDigits, biblioteka zaokrągli liczbę w górę.
Oto przykład pokazujący, jak możesz użyć tych rekwizytów:
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;
Formatowanie dat za pomocą komponentu FormattedDate
Możesz formatować daty w sposób spójny i łatwy do odczytania za pomocą React Intl. Komponent FormattedDate zapewnia prosty i efektywny sposób formatowania dat. Działa podobnie do bibliotek typu date-time formatujących daty, takich jak Moment.js.
Komponent FormattedDate przyjmuje wiele rekwizytów, takich jak wartość, dzień, miesiąc i rok. Właściwa wartość akceptuje datę, którą chcesz sformatować, a pozostałe rekwizyty konfigurują jej formatowanie.
Na przykład:
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;
W tym przykładzie rekwizyt wartości używa bieżącej daty. Używając rekwizytów dzień, miesiąc i rok, określasz, że rok, miesiąc i dzień mają być wyświetlane w długim formacie.
Oprócz dnia, miesiąca i roku, inne rekwizyty również formatują wygląd daty. Oto rekwizyty i wartości, które akceptują:
- rok: „numeryczny”, „2-cyfrowy”
- miesiąc: „numeryczny”, „2-cyfrowy”, „wąski”, „krótki”, „długi”
- dzień: „numeryczny”, „2-cyfrowy”
- godzina: „numeryczna”, „2-cyfrowa”
- minuta: „numeryczna”, „2-cyfrowa”
- druga: „numeryczna”, „2-cyfrowa”
- timeZoneName: „krótki”, „długi”
Możesz także użyć komponentu FormattedDate, aby sformatować i wyświetlić czas:
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;
Umiędzynaradawiaj swoje aplikacje React dla szerszego grona odbiorców
Nauczyłeś się instalować i konfigurować bibliotekę React-Intl w swojej aplikacji React. React-intl ułatwia formatowanie liczb, dat i walut w aplikacji React. Dane można formatować na podstawie ustawień regionalnych użytkownika przy użyciu składników FormattedMessage, FormattedNumber i FormattedDate.
Programiści React często popełniają błędy, które mogą prowadzić do poważnych konsekwencji. Na przykład brak poprawnej aktualizacji stanu. Ważne jest, aby zdawać sobie sprawę z tych typowych błędów i korygować je wcześnie, aby uniknąć kosztownych problemów.