loadTranslations()

概要

loadTranslations() 関数は、翻訳の読み込み動作をカスタマイズするための主な方法です。

本番環境では、翻訳がアプリで表示できるように保存されている必要があります。デフォルトでは、翻訳は GT CDN に保存されます。別のソースから翻訳を取得したい場合は、loadTranslations() 関数を指定できます。例えば：

アプリのバンドル内（最も一般的）
データベースから
API から
別の CDN から

アプリのバンドル内のローカルファイルから翻訳を読み込むためのサポートが組み込まれています。 React アプリでローカル翻訳を設定するには、このガイドに従ってください。

リファレンス

パラメーター

Prop	Type	Default
`locale?`	`string`	-

説明

型	説明
`locale`	翻訳を読み込む対象のロケール。

戻り値

指定されたロケールの翻訳を含む文字列またはJSXオブジェクトに解決される Promise<any>。

セットアップ

loadTranslations() 関数をインポートし、<GTProvider> コンポーネントのプロップとして割り当てる必要があります。

src/index.js

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 ディレクトリに保存されます。

loadTranslations.js

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

独自のCDNから翻訳を読み込む

loadTranslations.js

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() を使用すると、本番環境でアプリの翻訳の読み込み方法をカスタマイズできます。
最も一般的な用途は、ローカル翻訳を追加することです。

次のステップ

ローカル翻訳を使用する理由について学びましょう

loadTranslations()

このページについて