<Branch>

概要

<Branch> コンポーネントを使用すると、翻訳に条件付きロジックを追加できます。

const status = 'active';
<Branch branch={status}
    active={<p>ユーザーはアクティブです。</p>}
    inactive={<p>ユーザーは非アクティブです。</p>}
/>

branch パラメーターに値を渡すと、提供したキーに基づいて出力値と一致します。

リファレンス

Props

[key]: string 構文は、潜在的なブランチを表す任意のキーを示します。 例えば、active や inactive のようなブランチをパラメータとして追加できます。

戻り値

指定されたブランチまたはフォールバックコンテンツに対応するコンテンツを含む JSX.Element。

例外

branch プロップが提供されていないか無効な場合、Error をスローします。

例

基本的な使い方

<Branch> は、branch プロップの各可能な値に対して異なる出力を持つ必要があります。

この例では、user.hairColor の値を使用して出力を決定します。 user.hairColor の可能な値に一致するように、プロップ black、brown、blonde を定義しました。

import { Branch } from 'gt-react';
 
export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor} 
      black={<p>彼らの髪は暗いです。</p>}
      brown="彼らの髪は中間色です。" // (文字列を渡すこともできます)
      blonde={<p>彼らの髪は明るいです。</p>}
    />
  );
}

フォールバックコンテンツ

children は、branch に渡された値に一致するプロップがない場合、常にフォールバックとして使用されます。

import { Branch } from 'gt-react';
 
export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>彼らの髪は暗いです。</p>}
      brown={<p>彼らの髪は中間色です。</p>}
      blonde={<p>彼らの髪は明るいです。</p>}
    >
      <p>彼らの髪の色は不明です。</p> // [!code highlight]
    </Branch>
  );
}

<Branch> の翻訳

コンテンツを翻訳したい場合は、単に <T> コンポーネントでラップしてください。

import { T, Branch } from 'gt-react';
 
export default function HairColor({ user }) {
  return (
    <T id="example"> // [!code highlight]
      <Branch branch={user.hairColor}
        black={<p>彼らの髪は暗いです。</p>}
        brown={<p>彼らの髪は中間色です。</p>}
        blonde={<p>彼らの髪は明るいです。</p>}
      >
        <p>彼らの髪の色は不明です。</p> 
      </Branch>
    </T> 
  );
}

変数の追加

ブランチ内で動的な値をレンダリングしたい場合は、必ず <Currency>、<DateTime>、<Num>、または <Var> コンポーネントでラップしてください。

import { Branch, T, Var } from 'gt-react';
 
export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>彼らの髪は暗いです。</p>}
        brown={<p>彼らの髪は中間色です。</p>}
        blonde={<p>彼らの髪は明るいです。</p>}
      >
        <p>未処理の髪の色: <Var>{user.hairColor}</Var></p> // [!code highlight]
      </Branch>
    </T>
  );
}

メモ

• ブランチのキーは、ブランチのプロップに一致する任意の文字列値にすることができます。この柔軟性により、<Branch> をさまざまなユースケースに簡単に適応させることができます。
• <Branch> を <T> のような他のコンポーネントや、動的コンテンツのための変数コンポーネントと組み合わせて、豊かでローカライズされたインターフェースを作成します。

次のステップ

• より高度な使用法と例については、ブランチコンポーネントの使用を参照してください。
• <Currency>, <DateTime>, <Num>, <Var>のような変数コンポーネントについて詳しく知るには、変数コンポーネントの使用のドキュメントを参照してください。