web-dev-qa-db-ja.com

React i18nextおよび言語を変更する正しい方法

React、_i18next_および_i18next-browser-languagedetector_を使用して多言語アプリケーションを開発しています。

次の方法でi18nextを初期化します。

_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;
_

そして、localStorageの値をユーザーが選択したものに変更するだけの言語セレクターを実装しました。

これは正しい方法ですか？

これは機能しますが、localStorage.getItem(I18N_LANGUAGE) || "pt"を設定することで「不正行為」をしているように感じ、言語検出を本来の方法で使用していないので、質問します。

javascriptreactjstranslationi18next
15
pteixeira

documentation によると、自分で言語を指定する必要はありません。

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

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

そして、_i18next_の このソースの一部 によると、実際にはプラグインの検出機能を使用します。

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

これは正しい方法ですか？

ですから、そうではありません。プラグインに任せましょう。 :)

6
firstdoit

あなたはとても近いと思います。最初は、フォールバック言語で_i18n_を設定するだけです。そして、localstorageやlocalforageなどの保存された言語情報を読み込んだ後、i18nInstance.changeLanguage(lng)を呼び出します。

1
sean

@firstdoit：

自動ブラウザー言語検出に関しては良い答えです。ただし、ユーザーに自動構成と手動構成の両方を利用させる方がよいとは思いませんか。

たとえば、ブラウザが英語に設定されている場合、ドキュメントに基づいて提案している自動アプローチでは問題ありません。ユーザーがページの言語を英語からフランス語に変更しても、ブラウザーの言語には影響しません。構成はブラウザーの言語を自動的に検出するように設定されているため、サイトは英語でのみ維持されます。

次に、現在のページの言語を優先します。

  • パラメータ経由で渡される（/george.php?lang=frまたは/fr_FR/george.php）

これは小道具として私のコードに次のようにpronityとして渡されます

  • var lang = this.props.lang || this.services.languageDetector.detect（） || "en";

あなたはどう思いますか？

0
Joe