Z myślą o jak najszerszym gronie odbiorców Twoja aplikacja powinna komunikować się w różnych językach. Dowiedz się, jak uczynić to zadanie mniej zniechęcającym.
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.
Instalowanie React Intl
Aby korzystać z biblioteki React Intl, musisz ją najpierw zainstalować. Możesz to zrobić za pomocą więcej niż jeden menedżer pakietów: npm, przędza lub pnpm.
Aby zainstalować go za pomocą npm, uruchom to polecenie w swoim terminalu:
npm zainstaluj reakcję-intl
Aby zainstalować go za pomocą przędzy, uruchom to polecenie:
przędza dodaj reakcję-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 to m.in Sformatowana wiadomość I IntlProvider składniki.
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:
eksportkonst wiadomości po francusku = {
Powitanie: „Bonjour {imię}”
}
eksportkonst MessagesIn Italian = {
Powitanie: „Buongiorno {nazwa}”
}
Ten przykładowy plik tłumaczenia zawiera dwa obiekty tłumaczenia: wiadomości po francusku I wiadomości po włosku. Możesz zastąpić element zastępczy {nazwa} w Powitanie string w czasie wykonywania z wartością dynamiczną.
Aby korzystać z tłumaczeń w swojej aplikacji, musisz opakować główny komponent aplikacji w plik IntlProvider część. Komponent IntlProvider zajmuje trzy Zareaguj rekwizyty: widownia, domyślny język, I wiadomości.
Właściwość locale akceptuje ciąg znaków 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 Reagować z"reagować";
import ReactDOM z„reaguj/klient”;
import Aplikacja z„./Aplikacja”;
import { dostawca międzynarodowy } z"reagować-intl";
import { messageInFrench } z"./tłumaczenie";
ReactDOM.createRoot(dokument.getElementById("źródło")).renderowanie("fr" Messages={messagesInFrench} defaultLocale="pl">
</IntlProvider>
</React.StrictMode>
);
Ten przykład przechodzi fr lokal, wiadomości po francusku tłumaczenie i ustawienie domyślne en ustawienia regionalne do IntlProvider część.
Możesz przekazać więcej niż jedno ustawienie regionalne lub obiekt 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 w aplikacji, użyj metody Sformatowana wiadomość część. The Sformatowana wiadomość składnik zajmuje ID prop odpowiadający identyfikatorowi wiadomości w obiekcie wiadomości.
Komponent zajmuje również domyślna wiadomość I wartości rekwizyt. The domyślna wiadomość prop określa komunikat zastępczy, jeśli tłumaczenie jest niedostępne dla bieżącej lokalizacji, podczas gdy wartości prop zapewnia dynamiczne wartości symboli zastępczych w przetłumaczonych wiadomościach.
Na przykład:
import Reagować z"reagować";
import { Sformatowana wiadomość } z"reagować-intl";funkcjonowaćAplikacja() {
powrót (
identyfikator="Powitanie"
domyślna wiadomość=„Dzień dobry {imię}”
wartości={{ nazwa: 'Jan'}}
/>
</p>
</div>
);
}
eksportdomyślny Aplikacja;
W tym bloku kodu plik ID podpora Sformatowana wiadomość składnik używa Powitanie klucz od wiadomości po francusku obiekt i wartości rekwizyt zastępuje {nazwa} symbol zastępczy o wartości „Jan”.
Formatowanie liczb za pomocą komponentu FormattedNumber
React Intl zapewnia również Sformatowany numer składnik, 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 Reagować z"reagować";
import { Numer sformatowany } z"reagować-intl";funkcjonowaćAplikacja() {
powrót (
Dziesiętny: <Sformatowany numerwartość={123.456}styl="dziesiętny" />
</p>
Procent: <Sformatowany numerwartość={123.456}styl="procent" />
</p>
</div>
);
}
eksportdomyślny Aplikacja;
W tym przykładzie użyto Sformatowany numer komponent, który akceptuje a wartość prop określając liczbę, którą chcesz sformatować.
Używając styl prop, możesz dostosować wygląd sformatowanej liczby. Możesz ustawić styl podpora do dziesiętny, procent, Lub waluta.
Kiedy ustawisz styl prop do waluty, Sformatowany numer składnik formatuje liczbę jako wartość waluty przy użyciu kodu określonego w pliku waluta rekwizyt:
import Reagować z"reagować";
import { Numer sformatowany } z"reagować-intl";funkcjonowaćAplikacja() {
powrót (
Cena: <Sformatowany numerwartość={123.456}styl="waluta"waluta=„USD” />
</p>
</div>
);
}
eksportdomyślny Aplikacja;
The Sformatowany numer component formatuje liczbę w powyższym bloku kodu, używając formatu waluta styl i USD kod waluty.
Możesz także sformatować liczby z określoną liczbą miejsc dziesiętnych za pomocą minimalna liczba cyfr ułamkowych I maksymalna liczba cyfr ułamkowych rekwizyty.
The minimalna liczba cyfr ułamkowych prop określa minimalną liczbę cyfr ułamkowych do wyświetlenia. Dla kontrastu, maksymalna liczba cyfr ułamkowych prop określa maksymalną liczbę cyfr ułamkowych.
Jeśli liczba ma mniej cyfr ułamkowych niż określono minimalna liczba cyfr ułamkowych, React Intl uzupełni go zerami. Jeśli liczba ma więcej cyfr ułamkowych niż określono maksymalna liczba cyfr ułamkowych, biblioteka zaokrągli liczbę w górę.
Oto przykład pokazujący, jak możesz użyć tych rekwizytów:
import Reagować z"reagować";
import { Numer sformatowany } z"reagować-intl";funkcjonowaćAplikacja() {
powrót (
wartość={123.4567}
minimalna liczba cyfr ułamkowych = {2}
maksymalna liczba cyfr ułamkowych = {3}
/>
</p>
</div>
);
}
eksportdomyślny Aplikacja;
Formatowanie dat za pomocą komponentu FormattedDate
Możesz formatować daty w sposób spójny i łatwy do odczytania za pomocą React Intl. The Sformatowana data zapewnia prosty i efektywny sposób formatowania dat. Działa podobnie do biblioteki daty i godziny, które formatują daty, takie 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 Reagować z"reagować";
import { Sformatowana data } z"reagować-intl";funkcjonowaćAplikacja() {
konst dzisiaj = nowyData();powrót (
Dzisiajjest data
wartość={dzisiaj}
dzień=„numeryczne”
miesiąc="długi"
rok=„numeryczne”
/>
</p>
</div>
);
}
eksportdomyślny Aplikacja;
W tym przykładzie wartość prop używa bieżącej daty. Również za pomocą dzień, miesiąc, I rok props 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: „numeryczne”, „2-cyfrowe”, „wąskie”, „krótkie”, „długie”
- dzień: „numeryczny”, „2-cyfrowy”
- godzina: „numeryczny”, „2-cyfrowy”
- minuta: „numeryczny”, „2-cyfrowy”
- drugi: „numeryczny”, „2-cyfrowy”
- NazwaStrefy Czasowej: "krótki długi"
Możesz także skorzystać z tzw Sformatowana data komponent do formatowania i wyświetlania czasu:
import Reagować z"reagować";
import { Sformatowana data } z"reagować-intl";funkcjonowaćAplikacja() {
konst dzisiaj = nowyData();powrót (
Czas jest
wartość={dzisiaj}
godzina=„numeryczne”
minuta=„numeryczne”
drugi =„numeryczne”
/>
</p>
</div>
);
}
eksportdomyślny Aplikacja;
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.