Veröffentlicht am 20-02-2019

Reagieren Sie mehrsprachig mit reag-i18next

Foto von Vladislav Klapin auf Unsplash

Wenn wir eine internationale Website erstellen, ist der mehrsprachige Support immer eine der wichtigsten Funktionen. Glücklicherweise gibt es, wenn wir React verwenden, einige fantastische Bibliotheken, die praktisch und reaktionsfähig sind. I18next ist eine der beliebtesten Open Source-Bibliotheken.

Das allererste ist immer, eine Reakt-App mit create -react-app zu erstellen und die erforderlichen npm-Pakete zu installieren.

Und hier haben wir diese Übersetzungen in statische Json-Dateien geschrieben, und Sie können sie in den Rest-Endpunkt setzen, wenn Sie möchten.

Erstellen Sie das Assets-Verzeichnis im öffentlichen Ordner.

Erstellen Sie dann zwei einfache Übersetzungsdateien, eine für Englisch und eine für traditionelles Chinesisch, und legen Sie sie im Ordner public / assets / i18n / translations ab.

Im nächsten Schritt erstellen Sie das Konfigurations- / Initiierungsskript i18next. Erstellen wir eine Datei, i18n.js, im Verzeichnis src:

Lassen Sie uns nun zwei Dummy-Komponenten erstellen, eine für die Anzeige der Zeichenfolge "Hello" und die andere für "Danke". Die Bitrate-i18next-Bibliothek bietet mehrere Möglichkeiten für den Zugriff auf Übersetzungen, z. B. Kontext-API, Hooks, HOC usw. In den folgenden Beispielcodes verwendet Hello.js Hooks und ThankYou.js verwendet HOC.

Nun erstellen wir eine einfache Sprachauswahl, die 2 Optionsfelder enthält, aus denen Sie zwischen Englisch und traditionellem Chinesisch wählen können. Bei den folgenden Codes können Sie sehen, dass wir den Namen der Ländereinstellung einfach an die Funktion i18n.changeLanguage übergeben können, um zwischen den Sprachen zu wechseln.

Abschließend ändern wir die App.js, um alle Komponenten anzuzeigen, die wir bisher erstellt haben. Sie können sehen, dass wir Suspense hier verwenden, da die Reaktordatendateien-Datei reakt-i18next asynchron lädt und wir warten müssen, bis das Laden abgeschlossen ist, bevor wir sie verwenden können.

Das Ergebnis!

Github für Quellcodes: https://github.com/rickcodetalk/test-react-i18next

Siehe auch

Wahl der Hardware: Welches ist das beste Digital Signage-Gerät?Investition in die 5G-TechnologieTech Ladies AMA: Aubrey Blanche, Atlassians globaler Leiter für Diversity & GehörWachte um drei Uhr mittags auf und erschien im Tim Ferriss ’Podcast. ::Wie man sich mit Sound umgibtEin praktischer Leitfaden zum Erlernen der Frontend-Entwicklung für Anfänger