概要

<Branch> コンポーネントを使うと、翻訳に条件分岐ロジックを組み込めます。

const status = 'active';
<Branch branch={status}
    active={<p>ユーザーは有効です。</p>}
    inactive={<p>ユーザーは無効です。</p>}
/>

branch パラメータに value を渡すと、指定したキーに応じて対応する出力の value が選択されます。

リファレンス

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>}
    />
  );
}

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

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

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> 
  );
}

variables の追加

ブランチ内で動的な value をレンダリングする場合は、必ず <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> や、動的コンテンツ向けのvariable componentsなど、他のコンポーネントと <Branch> を組み合わせて、リッチでローカライズされたインターフェースを構築しましょう。

次のステップ

• より高度な使い方やサンプルは、Branching Components の使用を参照してください。