Components

Var

<Var> コンポーネントの APIリファレンス

概要

<Var> コンポーネントは、翻訳対象にしないコンテンツを表示するために使用します。 variables、コードスニペット、または翻訳すべきでないその他のコンテンツを表示するのに役立ちます。 また、API Keys や個人情報など、非公開にすべきコンテンツを表示する場合にも有用です。

<Var>{user.name}</Var>

<Var> コンポーネントは、常に <T> コンポーネントの内側で使用します。 <Currency><DateTime><Num> のいずれにも該当しない動的な value を汎用的に扱うためのものだと考えてください。

リファレンス

Props

Prop

Type

説明

Prop説明
childrenコンポーネント内にレンダリングするコンテンツ。指定されている場合は、value より優先されます。
valuechildren が指定されていない場合に表示される省略可能なデフォルト値。文字列を指定できます。

戻り値

翻訳対象外のコンテンツを含む JSX.Element


基本例

<Var> コンポーネントは <T> コンポーネントの中で使用する必要があります。

Address.jsx
import { T, Var } from 'gt-react'

export default function Example(user) {
  return (
    <T>
      このテキストを翻訳してください!
      あなたの名前は: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}

注意事項

  • Variable Components は、翻訳内の訳さない動的コンテンツを保持するために不可欠です。
  • 必ず <T> コンポーネントの内側で Variable Components を使用してください。
  • <Num><Currency><DateTime> といったコンポーネントは、正確な書式を保証するローカリゼーション機能を提供します。

次のステップ

  • <Var> コンポーネントや <Currency><DateTime><Num> などの各種 Variable コンポーネントに関する、より詳しい解説と使用例は、 Variable コンポーネントの使い方 を参照してください。
  • 個別の Variable コンポーネントにおける書式設定の options については、APIリファレンスをご覧ください。

このガイドはいかがですか?