コンポーネントマクロ

コンポーネントマクロは、Lingui マクロ群のうち、マークアップ用の側面を担うものです。

公式 Lingui の React ドキュメントでは、Trans は固定メッセージ、変数を含むメッセージ、インラインマークアップを含むメッセージに使う汎用コンポーネントです。 Plural、Select、SelectOrdinal は、それぞれ対応するコアマクロに対応した、コンポーネント形式の補助マクロです。

lingui-for でも、JSX ベースではないフレームワークにおいてこの考え方を保っています。

コンポーネントマクロの概要

Trans

埋め込みマークアップとプレースホルダーを含むリッチテキストを翻訳します

Plural

複数形のICUブランチをマークアップ内のコンポーネントプロパティとして記述します

Select

ケースベースの選択をマークアップのプロパティとして記述します

SelectOrdinal

序数ケースをコンポーネントのプロパティとして直接記述します

Trans

埋め込みマークアップとプレースホルダーを含むリッチテキストを翻訳します

プレビュー

Linguiに挨拶する

スニペット

<Trans>
  Say hello to <strong>{name}</strong>.
</Trans>

完全なデモを見る

Plural

複数形のICUブランチをマークアップ内のコンポーネントプロパティとして記述します

プレビュー

3個のファイル

スニペット

<Plural
  value={count}
  one="# file"
  other="# files"
/>

完全なデモを見る

Select

ケースベースの選択をマークアップのプロパティとして記述します

プレビュー

やあ

スニペット

<Select
  value={tone}
  _formal="Welcome"
  _casual="Hi"
  other="Hello"
/>

完全なデモを見る

SelectOrdinal

序数ケースをコンポーネントのプロパティとして直接記述します

プレビュー

1番目

スニペット

<SelectOrdinal
  value={place}
  one="#st"
  two="#nd"
  few="#rd"
  other="#th"
/>

完全なデモを見る

まずここから始めるべき場面

次のような場合は、コンポーネントマクロから始めてください。

• テンプレートやマークアップ構文で書いている
• リッチテキストや埋め込み構造が重要である
• そのフレームワークでは、関数呼び出しよりコンポーネント形式のほうが自然に読める

このセクションのページ

• Trans
• Plural
• Select
• SelectOrdinal