Components

<Var>

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

概要

<Var> コンポーネントは、翻訳されるべきでない内容を表示するために使用されます。 これは、変数やコードスニペット、または翻訳されるべきでないその他の内容を表示するのに便利です。 さらに、APIキーや個人情報など、非公開にすべき内容を表示する場合にも役立ちます。

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

<Var> コンポーネントは常に <T> コンポーネントの内部で使用されます。 これは <Currency><DateTime>、または <Num> のカテゴリに当てはまらない動的な値のための汎用的なものと考えてください。

リファレンス

Props

PropTypeDefault
value??
string
undefined
name??
string
undefined
children??
JSX.Element
undefined

説明

Prop説明
childrenコンポーネント内にレンダリングされる内容です。指定された場合、value よりも優先されます。
valuechildren が指定されていない場合に表示されるオプションのデフォルト値です。文字列を指定できます。

戻り値

翻訳してはいけない内容を含む JSX.Element を返します。


基本例

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

Example.jsx
import { T, Var } from 'gt-next'

export default function Example(user) {
  return (
    <T>
      Translate this text!
      Your name is: <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コンポーネントの書式設定オプションについては、APIリファレンスで詳しく学べます。

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