Var
<Var> コンポーネントの APIリファレンス
概要
<Var> コンポーネントは、翻訳してはならないコンテンツを表示するために使用します。
変数やコードスニペット、その他の翻訳対象外のコンテンツを表示する際に役立ちます。
また、API Keys や個人情報など、非公開にすべきコンテンツを表示する場合にも有用です。
<Var>{user.name}</Var><Var> コンポーネントは、常に <T> コンポーネントの内部で使用します。
<Currency>、<DateTime>、<Num> のいずれにも当てはまらない動的な value を扱うための汎用的なキャッチオールと考えてください。
リファレンス
プロパティ
Prop
Type
説明
| Prop | 説明 |
|---|---|
children | コンポーネント内にレンダーするコンテンツ。指定されている場合は value より優先されます。 |
value | children が指定されていない場合に表示される任意の既定値。文字列を指定できます。 |
返り値
翻訳対象外のコンテンツを含む JSX.Element。
例
基本例
<Var> コンポーネントは <T> コンポーネントの中で使用する必要があります。
import { T, Var } from 'gt-next'
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 は、翻訳で訳さない動的コンテンツを保持するために不可欠です。
- Variable Components は必ず
<T>コンポーネント内で使用してください。 <Num>、<Currency>、<DateTime>といったコンポーネントは、正確な書式を保証するためのローカリゼーション機能を提供します。
次のステップ
<Var>コンポーネントや<Currency>、<DateTime>、<Num>などの他の Variable コンポーネントに関する、より詳しい解説と使用例は、 Variable コンポーネントの使用 ドキュメントをご覧ください。- 特定の Variable コンポーネント向けのフォーマット options の詳細は、APIリファレンス をご参照ください。
このガイドはいかがですか?