<Branch>

概要

<Branch>コンポーネントは、翻訳に条件分岐のロジックを追加することができます。

const status = 'active';
<Branch branch={status}
    active={<p>The user is active.</p>}
    inactive={<p>The user is inactive.</p>}
/>

branchパラメータに値を渡すと、その値が指定したキーに基づいて出力値とマッチします。

リファレンス

Props

Prop	Type	Default
`[key]: string?`	`string \| JSX.Element`	-
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`
`branch?`	`string`	-

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

Prop	説明
`branch`	レンダリングするブランチの名前。
`children`	一致するブランチが見つからなかった場合にレンダリングされるフォールバックコンテンツ。
`[key]: string`	指定されたブランチ値に対する可能なコンテンツを表すブランチ。それぞれのキーがブランチに対応し、その値がレンダリングされるコンテンツとなります。

戻り値

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

例外

branch プロップが指定されていない、または無効な場合は Error がスローされます。

例

基本的な使い方

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

この例では、user.hairColor の値を使って出力を決定しています。 user.hairColor の可能な値に合わせて、black、brown、blonde のプロップを定義しています。

BranchExample.jsx

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown="Their hair is in the middle." // (you can pass a string if you prefer)
      blonde={<p>Their hair is light.</p>}
    />
  );
}

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

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

BranchExample.jsx

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>Their hair is dark.</p>}
      brown={<p>Their hair is in the middle.</p>}
      blonde={<p>Their hair is light.</p>}
    >
      <p>Their hair is unknown.</p> // [!code highlight]
    </Branch>
  );
}

`<Branch>` の翻訳

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

BranchExample.jsx

import { T, Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Their hair is unknown.</p> 
      </Branch>
    </T> 
  );
}

変数の追加

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

BranchExample.jsx

import { Branch, T, Var } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>Their hair is dark.</p>}
        brown={<p>Their hair is in the middle.</p>}
        blonde={<p>Their hair is light.</p>}
      >
        <p>Unhandled hair color: <Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

注意事項

ブランチのキーには、branchプロップと一致する任意の文字列値を使用できます。この柔軟性により、<Branch> をさまざまなユースケースに簡単に適用できます。
<Branch> を他のコンポーネント（例えば、翻訳用の <T> や動的コンテンツ用の variable components）と組み合わせることで、リッチでローカライズされたインターフェースを作成できます。

次のステップ

より高度な使い方や例については、Using Branching Components を参照してください。
<Currency>、<DateTime>、<Num>、<Var> などの可変コンポーネントについて詳しく知りたい場合は、Using Variable Components のドキュメントをご覧ください。

<Branch>

このページについて