i18n
Przewodnik do wielojęzyczności w React — zarządzaj tłumaczeniami za pomocą react-i18next
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do obsługi internacjonalizacji (i18n) w projektach React. Pomaga dodawać tłumaczenia, tworzyć klucze i18n oraz pracować z lokalizowanym tekstem w komponentach .tsx. Aktywuje się przy zadaniach związanych z tłumaczeniami, zarządzaniem lokalizacją lub implementacją wielojęzyczności. Używa konwencji płaskich kluczy z notacją kropkową i framework react-i18next. Domyślny język to chiński (zh-CN).
Jak używać
Dodaj nowe klucze tłumaczeń do pliku w katalogu src/locales/default/ — nigdy nie edytuj bezpośrednio plików JSON w folderze locales/. Stosuj konwencję płaskich kluczy z notacją kropkową, na przykład 'alert.cloud.action' zamiast zagnieżdżonych obiektów.
Eksportuj nową przestrzeń nazw w pliku src/locales/default/index.ts, aby udostępnić ją w aplikacji.
Dla podglądu podczas pracy nad kodem ręcznie przetłumacz klucze w plikach locales/zh-CN/{namespace}.json i locales/en-US/{namespace}.json — to pozwoli ci testować bez uruchamiania pełnego procesu generowania.
Uruchom polecenie pnpm i18n, aby wygenerować tłumaczenia dla wszystkich języków. W środowisku CI proces ten uruchamia się automatycznie.
W komponentach React zaimportuj hook useTranslation z react-i18next i pobierz funkcję t, na przykład const { t } = useTranslation('common'). Następnie używaj kluczy do wyświetlania tłumaczeń, np. t('newFeature.title') lub t('alert.cloud.desc', { credit: '1000' }) dla kluczy z parametrami.
Jeśli potrzebujesz tekstu z wielu przestrzeni nazw, przekaż je jako tablicę do useTranslation, a następnie odwołuj się do nich z prefiksem, na przykład useTranslation(['common', 'chat']) i t('common:save').