Typescript: 文章の句点を<br/>で置き換えたい

Question

やりたいこと: propsで文章を受け取る→「。」を<br />で置き換えたい
困っていること: template stringを使った書き方がわからない; テンプレートストリングがJSXElementをどう扱っているのかわからない
試したこと: 調べたコードを試した; ``や{}で囲むなど

現状のコード

<p>
{props.desc.split('。').map(s => (
{s} <br/>
)}
</p>

Answer 1

こんにちは

<React.Fragment> を使って、以下でいけるかと思います。

  <p>
    {props.desc.split('。').map((line, i) => 
      <React.Fragment key={i}>{line}<br /></React.Fragment>)
     }
  </p>

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/mdbXLmq

以上、参考になれば幸いです。

備考

<React.Fragment> には <> という短い記法がありますが、<> の場合、 配列要素になるコンポーネントに渡さなければならない、 key prop を使えないので、上記のように、省略しないで <React.Fragment> と書きます。

Comments

[olee46]

React.Fragmentの存在を忘れていました！ありがとうございます

[jun68ykt]

どういたしまして。解決したようで、よかったです????