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()

このページについて