特に意味はないけれども、シリーズっぽいタイトルにしてみた。

やりたいこと

翻訳する文字列の一部に変数を入れたい。
イメージとしては以下のようなかたち。

<p>こんにちは！ hogehoge さん</p>

変数を使わない対応

「こんにちは」と「さん」でコンポート分割すれば一応解決できるようには見えます。

<p>
  <FormattedMessage id="sample.hello" defaultMessage="こんにちは" />
  {username}
  <FormattedMessage id="sample.san" defaultMessage="さん" />
</p>

ただこれをすると、「英語で "Hello Mrs. hogehoge" ってやりたい時どうすんの？」となるんですね。
sample.sanを空欄にして、sample.helloが「Hello Mrs.」になるのは相当気持ち悪い。

ということで、ちゃんと変数を使って対応します。

変数を使った場合

<p>
 <FormattedMessage
   id="sample.welcome"
   defaultMessage="Welcome!"
   values={{
    username: 'hogehoge'
   }}
 />
</p>

valuesを使うことで、コンポーネント１つ・翻訳文１つでいけるようになりました。

翻訳文側では、values にいれたオブジェクトのキーで変数の表示位置を決めれます。

ja: `こんにちは {username} さん`
en: `Hello! Mrs. {username}`

変数にHTMLタグを組み込む

valuesにはReactコンポーネントやHTMLタグも許可されています。
なので以下のようにすることで、翻訳文章内にリンクを組み込む事もできます。

<p>
 <FormattedMessage
   id="sample.welcome"
   defaultMessage=""
   values={{
    link: (
      <a href='https://google.com'>
       <FormattedMessage id="sample.here" defaulMessage="click here" />
      </a>
     )
   }}
 />
</p>

翻訳文側は特に変える必要もありません。

ja: `続きは{link}`
en: `More information {link}`

便利ですね。