web-dev-qa-db-fra.com

React i18next et manière correcte de changer de langue

Je développe une application multilingue utilisant React, i18next Et i18next-browser-languagedetector.

J'initialise i18next de la manière suivante:

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;

Et j'ai implémenté un sélecteur de langue qui modifie simplement la valeur du localStorage en ce que l'utilisateur a choisi.

Est-ce la bonne façon de procéder?

Je demande parce que même si cela fonctionne, je sens que je "triche" en définissant localStorage.getItem(I18N_LANGUAGE) || "pt" et que je n'utilise pas la détection de langue comme je le devrais.

javascriptreactjstranslationi18next
15
pteixeira

Selon la documentation , vous ne devriez pas avoir besoin de spécifier la langue vous-même:

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

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

Et selon ce morceau de source dans i18next, Il utilise en effet les capacités de détection du plugin:

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

Est-ce la bonne façon de procéder?

Donc, non, ça ne l'est pas. Laissez le plugin faire son travail. :)

6
firstdoit

Je pense que vous êtes très proche. Vous pouvez simplement définir i18n Avec une langue de remplacement au départ. Et puis, après avoir chargé les informations de langue enregistrées pour le stockage local ou localforage ou tout autre stockage, appelez i18nInstance.changeLanguage(lng).

1
sean

@firstdoit:

Bonne réponse en ce qui concerne la détection automatique de la langue du navigateur. Cependant, ne pensez-vous pas que c'est une meilleure approche d'avoir la configuration automatique et manuelle à la disposition d'un utilisateur.

Par exemple, si l'on a un navigateur réglé sur anglais, ce sera correct pour l'approche automatique que vous proposez sur la base de la documentation. Si un utilisateur change la langue de la page de l'anglais au français, cela n'affecte pas la langue du navigateur, ce qui permet de conserver le site uniquement en anglais car les configurations sont définies pour détecter automatiquement la langue du navigateur.

À mon tour, je donnerai la priorité à la langue de la page actuelle:

  • Soit transmis via des paramètres (/george.php?lang=fr ou /fr_FR/george.php)

Cela se passera comme accessoires à mon code comme une priorité comme suit

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

Quelle est votre opinion?

0
Joe