yuw27b’s blog

技術メモと雑記

改行入りのテキストをReactでレンダリングする

改行が含まれてると分かっている時は、component内に関数を用意して、行ごとにpタグで囲む。

または、brタグを挿入する

const textWrap = (text) => {
  if (typeof text !== 'string') {
    return null;
  }
  return text.split('\n').join('<br />');
}


改行が2連続の場合は、

<br /><br />

になるので、マークアップとしてはよろしくない。
そういう連続した改行というのは段落の切れ目を表しているので、ひとかたまりのテキストではなく、配列データにすべき、という気がする。

ユーザーがテキストエリアに入力するテキストなどは自由に改行ができてしまうが、場合によっては、連続していたら1つにする、みたいな処理をしてもいいのかもしれない。