GitHub

概要

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

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

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

参考

Props

Prop

Type

[key]: string 構文は、想定されるブランチを表す任意のキーを示します。例えば、active や inactive といったブランチをパラメータとして追加できます。

Prop	Description
`branch`	レンダリングするブランチ名。
`children`	一致するブランチがない場合にレンダリングするフォールバックの内容。
`[key]: string`	指定されたブランチ値に対する候補コンテンツを表すブランチ。各キーがブランチに対応し、その値がレンダリングされる内容になります。

戻り値

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

送出

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

例

基本的な使い方

<Branch> は、branch プロパティの可能な各値に対して、それぞれ異なる出力を用意する必要があります。

この例では、user.hairColor の値で出力を分岐します。 user.hairColor の取り得る値に対応して、black、brown、blonde の props を定義しています。

BranchExample.jsx

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>髪は黒いです。</p>}
      brown="髪は茶色です。" // (お好みで文字列を渡すこともできます)
      blonde={<p>髪は金髪です。</p>}
    />
  );
}

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

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

BranchExample.jsx

import { Branch } from 'gt-next';

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> コンポーネントで包むだけです。

BranchExample.jsx

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>その人の髪は黒いです。</p>}
        brown={<p>その人の髪は茶色です。</p>}
        blonde={<p>その人の髪は金髪です。</p>}
      >
        <p>その人の髪の色は不明です。</p> 
      </Branch>
    </T> 
  );
}

variables の追加

ブランチで動的な値を表示する場合は、必ずそれらを <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>髪の色は黒です。</p>}
        brown={<p>髪の色は茶色です。</p>}
        blonde={<p>髪の色は金色です。</p>}
      >
        <p>未対応の髪色：<Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

注意事項

ブランチのキーには、branch プロップに一致する任意の文字列を指定できます。この柔軟性により、<Branch> を多様なユースケースに容易に適用できます。
<Branch> は、翻訳用の <T> や動的コンテンツ用の variable components などの他コンポーネントと組み合わせることで、リッチでローカライズされたインターフェースを構築できます。

次のステップ

さらに高度な使い方や例については、Branching Components の利用を参照してください。

概要

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

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

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

参考

Props

Prop

Type

Prop	Description
`branch`	レンダリングするブランチ名。
`children`	一致するブランチがない場合にレンダリングするフォールバックの内容。
`[key]: string`	指定されたブランチ値に対する候補コンテンツを表すブランチ。各キーがブランチに対応し、その値がレンダリングされる内容になります。

戻り値

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

送出

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

例

基本的な使い方

<Branch> は、branch プロパティの可能な各値に対して、それぞれ異なる出力を用意する必要があります。

この例では、user.hairColor の値で出力を分岐します。 user.hairColor の取り得る値に対応して、black、brown、blonde の props を定義しています。

BranchExample.jsx

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>髪は黒いです。</p>}
      brown="髪は茶色です。" // (お好みで文字列を渡すこともできます)
      blonde={<p>髪は金髪です。</p>}
    />
  );
}

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

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

BranchExample.jsx

import { Branch } from 'gt-next';

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> コンポーネントで包むだけです。

BranchExample.jsx

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>その人の髪は黒いです。</p>}
        brown={<p>その人の髪は茶色です。</p>}
        blonde={<p>その人の髪は金髪です。</p>}
      >
        <p>その人の髪の色は不明です。</p> 
      </Branch>
    </T> 
  );
}

variables の追加

ブランチで動的な値を表示する場合は、必ずそれらを <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>髪の色は黒です。</p>}
        brown={<p>髪の色は茶色です。</p>}
        blonde={<p>髪の色は金色です。</p>}
      >
        <p>未対応の髪色：<Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

注意事項

ブランチのキーには、branch プロップに一致する任意の文字列を指定できます。この柔軟性により、<Branch> を多様なユースケースに容易に適用できます。
<Branch> は、翻訳用の <T> や動的コンテンツ用の variable components などの他コンポーネントと組み合わせることで、リッチでローカライズされたインターフェースを構築できます。

次のステップ

さらに高度な使い方や例については、Branching Components の利用を参照してください。

概要

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

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

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

参考

Props

Prop

Type

Prop	Description
`branch`	レンダリングするブランチ名。
`children`	一致するブランチがない場合にレンダリングするフォールバックの内容。
`[key]: string`	指定されたブランチ値に対する候補コンテンツを表すブランチ。各キーがブランチに対応し、その値がレンダリングされる内容になります。

戻り値

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

送出

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

例

基本的な使い方

<Branch> は、branch プロパティの可能な各値に対して、それぞれ異なる出力を用意する必要があります。

この例では、user.hairColor の値で出力を分岐します。 user.hairColor の取り得る値に対応して、black、brown、blonde の props を定義しています。

BranchExample.jsx

import { Branch } from 'gt-next';

export default function HairColor({ user }) {
  return (
    <Branch branch={user.hairColor}
      black={<p>髪は黒いです。</p>}
      brown="髪は茶色です。" // (お好みで文字列を渡すこともできます)
      blonde={<p>髪は金髪です。</p>}
    />
  );
}

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

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

BranchExample.jsx

import { Branch } from 'gt-next';

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> コンポーネントで包むだけです。

BranchExample.jsx

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

export default function HairColor({ user }) {
  return (
    <T id="example">
      <Branch branch={user.hairColor}
        black={<p>その人の髪は黒いです。</p>}
        brown={<p>その人の髪は茶色です。</p>}
        blonde={<p>その人の髪は金髪です。</p>}
      >
        <p>その人の髪の色は不明です。</p> 
      </Branch>
    </T> 
  );
}

variables の追加

ブランチで動的な値を表示する場合は、必ずそれらを <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>髪の色は黒です。</p>}
        brown={<p>髪の色は茶色です。</p>}
        blonde={<p>髪の色は金色です。</p>}
      >
        <p>未対応の髪色：<Var>{user.hairColor}</Var></p>
      </Branch>
    </T>
  );
}

注意事項

ブランチのキーには、branch プロップに一致する任意の文字列を指定できます。この柔軟性により、<Branch> を多様なユースケースに容易に適用できます。
<Branch> は、翻訳用の <T> や動的コンテンツ用の variable components などの他コンポーネントと組み合わせることで、リッチでローカライズされたインターフェースを構築できます。

次のステップ

さらに高度な使い方や例については、Branching Components の利用を参照してください。

Branch

このページについて

Branch

このページについて

Branch

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする