Как выполнить настройку i18next? - PullRequest
Новая
       51

Как выполнить настройку i18next?

0 голосов
/ 07 апреля 2020

Я хочу использовать response-i18next в своем проекте и хочу настроить параметры i18 на данные, полученные с сервера, поэтому это асинхронная функция c.

первый сенарио, пришедший мне в голову, использует это: 

  useEffect(() => {
    console.log("i18n_useEffect", i18n);
    setTimeout(function() {
      console.log(
        "fetch data from server,and then reset i18n.js configuration"
      );
      const configurationFromServer = {...};
      localStorage.setItem("i18n_configuration",configurationFromServer)
      seti18nLoaded(true);
    }, 3000);
  },[]);

seti18nLoaded && <Componenrts/>

Сначала мы получаем данные конфигурации с сервера, и, как только это будет сделано, мы можем отобразить наш и использовать i18n внутри.

но это не выглядит правильно, потому что, если настройки API потерпели неудачу или я получил данные. Сначала я хочу задать настройку по умолчанию, а затем обновить ее.

следующим образом: 

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

const init_i18n = configFromServer => {
  i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(configFromServer);
};

const defaultConfig = {
  // we init with resources
  resources: {},
  fallbackLng: "en",
  debug: true,
  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false
  }
};

const configFromServer = {
  // we init with resources
  resources: {
    en: {
      translations: {
        Hello: "Hello",
        welcome: "welcome",
        "Use string as key": "Use string as key"
      }
    },
    de: {
      translations: {
        "Use string as key": "Use string as key_de",
        Hello: "Hello_de",
        welcome: "welcome_de"
      }
    }
  },
  fallbackLng: "en",
  debug: true,

  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false
  }
};

const initialize = () => {
  i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init(defaultConfig);

  setTimeout(() => {
    console.log("fetch data from server");
    //I want update the configuration here.but not work.
    init_i18n(configFromServer);
  }, 2000);
};

initialize();

export default i18n;

, так что идея заключается в том, что мы используем конфигурацию по умолчанию, чтобы инициализировать ее один раз, а затем обновить ее на основе данных, которые мы извлекаем с сервера

, и я буду использовать следующий способ, потому что я хочу, чтобы по умолчанию отображался текст engli sh до того, как конфигурация i18next была загружена с сервера или не получена.

I Я не уверен, что моя идея - правильный способ сделать это. Я также взглянул на i18next-xhr-backend, он просматривает конфигурацию пути API в функции init, но это трудно понять, будет полезно, если кто-нибудь может привести пример использования i18next-xhr-backend .

В любом случае, у меня есть демо-версия здесь, чтобы объяснить это более четко: https://codesandbox.io/s/react-i18next-gpzyc

и у меня есть fack api для проверки конфигурации: https://my-json-server.typicode.com/jjzjx118/demo/db

возвращается: 

{
  "en": {
    "translations": {
      "Hello": "Hello",
      "welcome": "welcome",
      "Use string as key": "Use string as key"
    }
  },
  "de": {
    "translations": {
      "Use string as key": "Use string as key_de",
      "Hello": "Hello_de",
      "welcome": "welcome_de"
    }
  }
}

спасибо.

1 Ответ

0 голосов
/ 08 апреля 2020

Я проверил вашу ссылку в песочнице, и экземпляр i18n уже был повторно инициализирован из новой конфигурации. Вам не хватает выбора языка, который вам нравится вручную.

Поскольку вы используете LanguageDetector, он просто выберет язык на основе браузера и т. Д. c. Если вы хотите изменить его вручную после получения запроса с сервера, вы можете позвонить i18n.changeLanguage("de"), после его повторной инициализации.

В вашем случае: 

setTimeout(() => {
    console.log("fetch data from server");
    init_i18n(configFromServer);

    // You can change the language here based on the config
    i18n.changeLanguage("de");
  }, 2000);

Вот рабочая песочница https://codesandbox.io/s/react-i18next-we8xi

...