Блог

Переводы не меняются при смене языка. Я использую MobX для хранения состояния языка. Изменение языка изменяет языковой стандарт в I18nContext.Провайдера, но текст на странице не меняется.

Мой крючок.

 import {useI18n} from "@shopify/react-i18n"; import enTrans from "../../translate/en.json"; import frTrans from "../../translate/fr.json";  export const UseI18nHook = () =gt; {  console.log('hook1');  return useI18n({  id: 'App',  fallback: 'fr',  translations(locale) {  return locale === "en" ? enTrans : frTrans;  }, })};  

Мой поставщик услуг по переводу

 import React from "react"; import {inject, observer} from "mobx-react"; import {I18nContext, I18nManager} from '@shopify/react-i18n';  const TranslateWrapper = inject(stores =gt; ({  activeEnglish: stores.LocalizeStore.activeEnglish }))(observer(({activeEnglish, children}) =gt; {   return(  lt;I18nContext.Provider value={new I18nManager({  locale: activeEnglish ? 'en' : 'fr',  onError(error) {  console.log(error);  },   })}gt;  {children}  lt;/I18nContext.Providergt;  ) }));  export default TranslateWrapper;  

На странице, которую я использую const [i18n] = UseI18nHook(); , и i18n.translate('App.InstallPage.installTitle')

я бы реализовал это следующим образом: сначала я буду использовать пользовательский крюк перевода для обработки всей логики для меня

 import * as translations from "./Translations";  import { useEffect } from "react";  export default function useTranslation() {  const [language, setLanguage] = useState("ar");  const [fallbackLanguage, setFallbackLanguage] = useState("en");   //this is optional if the language is rtl  useEffect(() =gt; {  document.documentElement.dir = language === "ar" ? "rtl" : "ltr";  }, [language]);   const translate = (key) =gt; {  const keys = key.split(".");   return (  getNestedTranslation(language, keys) ?? //return the value of the key in the selected language  getNestedTranslation(fallbackLanguage, keys) ?? //return the value of the key in fallback language if there is no translation found in the main langrage  key // return the key itself if there is no translation found in the fallback language  );  };   return {  language,  setLanguage,  fallbackLanguage,  setFallbackLanguage,  t: translate,  }; }  function getNestedTranslation(language, keys) {  return keys.reduce((obj, key) =gt; {  return obj?.[key];  }, translations[language]); }   

затем создайте папку под названием Translations, в которой есть index.js

 export * as en from "./en.json"; export * as ar from "./ar.json"; //any other languages  

и файлы JSON, в которых есть переводы

ru.json:

 "hello":"Welcome"  

ar.json:

 "hello": "مرحبا"  

На странице я использую const {t} = useTranslation(); и t(«привет»)

у вас также могут быть вложенные ключи, подобные этому

 "months": [  "feb",  "jan",  "mar" ]  

и используйте его так: t(«месяцы.1») (вернется в феврале)

в компоненте, который изменит язык, выполните следующие действия, и он должен быть повторно отправлен :

 cosnt {setLanguage}=useTranslation();  const handleLangChange=(lang)=gt;{ setLanguage(lang); }