Reagieren i18next und korrekte Art der Sprachänderung

Question

Ich entwickle eine mehrsprachige Anwendung mit React, i18next und i18next-browser-languagedetector.

ich initialisieren i18next folgendermaßen:

i18n 
    .use(LanguageDetector) 
    .init({ 
    lng: localStorage.getItem(I18N_LANGUAGE) || "pt", 
    fallbackLng: "pt", 
    resources: { 
     en: stringsEn, 
     pt: stringsPt 
    }, 
    detection: { 
     order: ["localStorage", "navigator"], 
     lookupQuerystring: "lng", 
     lookupLocalStorage: I18N_LANGUAGE, 
     caches: ["localStorage"] 
    } 
    }); 

export default i18n; 

Und ich habe eine Sprachwahl implementiert, die nur den Wert in der localStorage ändert sich zu dem, was der Benutzer wählen.

Ist dies der richtige Weg?

Ich frage, weil, obwohl das funktioniert, ich fühle, dass ich "betrüge" durch Einstellung localStorage.getItem(I18N_LANGUAGE) || "pt" und dass ich nicht die Spracherkennung verwende, wie ich sollte.

Answer 1

Nach dem documentation, sollten Sie nicht die Sprache selbst angeben müssen:

import i18next from 'i18next'; 
import LngDetector from 'i18next-browser-languagedetector'; 

i18next 
    .use(LngDetector) 
    .init({ 
    detection: options 
    }); 

Und nach this piece of source in i18next, es in der Tat verwendet die Erkennungsfähigkeiten des Plugins:

if (!lng && this.services.languageDetector) lng = this.services.languageDetector.detect();

Ist dies der richtige Weg?

Also, nein, ist es nicht. Lass das Plugin es machen. :)

Answer 2

@firstdoit:

Gute Antwort in Bezug auf die automatische Browser-Spracherkennung. Aber denken Sie nicht, dass es ein besserer Ansatz ist, sowohl die automatische als auch die manuelle Konfiguration einem Benutzer zur Verfügung zu stellen.

Wenn zum Beispiel ein Browser auf Englisch eingestellt ist, ist dies für den automatischen Ansatz, den Sie basierend auf der Dokumentation vorschlagen, in Ordnung. Sollte ein Benutzer eine Seitensprache von Englisch auf Französisch ändern, hat dies keine Auswirkungen auf die Browsersprache. Daher wird die Website nur auf Englisch gehalten, da Konfigurationen so eingestellt sind, dass sie die Browsersprache automatisch erkennen.

I, wiederum Priorität auf die aktuelle Seite Sprache geben wird:

• Entweder bestanden über Parameter (/george.php?lang=fr oder /fr_FR/george.php)

Dies biegen als Requisiten als prority zu meinen Code übergeben werden, wie

• var lang = this.props.lang folgen || this.services.languageDetector.detect() || "en";

Was ist Ihre Meinung?

Answer 3

Ich denke, Sie sind sehr nah dran. Sie können i18n mit Fallback-Sprache zunächst festlegen. Nach dem Laden gespeicherter Sprachinformationen für lokalen Speicher oder lokales Speichermaterial oder einen anderen Speicher rufen Sie i18nInstance.changeLanguage(lng).