Обзор

Функция loadTranslations — основной способ настроить поведение загрузки переводов.

В продакшне переводы должны быть где‑то сохранены, чтобы их можно было рендерить в приложении. По умолчанию ваши переводы хранятся в GT CDN. Вы можете указать функцию loadTranslations, чтобы получать переводы из другого источника, например:

• из бандла приложения (самый распространённый вариант)
• из базы данных
• из API
• из другого CDN

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

Справка

Параметры

Описание

Возвращает

Promise<any>, который разрешается в строку или объект JSX с переводами для указанной локали.

Настройка

Импортируйте функцию loadTranslations и передайте её как проп компоненту <GTProvider>.

import loadTranslations from './loadTranslations';

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Примеры

Загрузка переводов из локальных файлов

При использовании локальных переводов команда gtx-cli translate сохраняет переводы в каталог ./src/_gt.

export default async function loadTranslations(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
};

Загружайте переводы с собственного CDN

export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};

Примечания

• loadTranslations позволяет настраивать способ загрузки переводов в приложении на продакшене.
• Самый распространенный сценарий — добавление локальных переводов

Что дальше