文字列の翻訳

概要

このガイドは、Reactアプリで文字列を翻訳する方法についてのステップバイステップのチュートリアルです。 useGT()を使用します。

セットアップ

前提条件

プロジェクトに gt-react がすでにインストールされており、クイックスタートガイドに従っているか、現在従っていることを前提としています。

文字列の翻訳

文字列については、useGT() を使用してください。 useGT() は <GTProvider> の子コンポーネント内で呼び出す必要があることを忘れないでください。

src/components/MyComponent.jsx

import { useGT } from 'gt-react';
 
export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}

変数の追加

変数は変更される可能性のある値ですが、翻訳されません。文字列に変数を追加するには、次のパターンを使用します:

MyComponent.jsx

import { useGT } from 'gt-react';
 
export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

ノート

文字列の翻訳には、useGT()を使用します。
変数は、{ variables: { key: value } } パターンを使用して文字列に追加できます。

次のステップ

プロジェクトの翻訳設定を完了するために、クイックスタートガイドに戻ります。
useGT()のAPIリファレンスを参照してください。

文字列の翻訳

概要

セットアップ

前提条件

文字列の翻訳

変数の追加

ノート

次のステップ

このページについて