Reactで改行コード\nを改行させる方法

デフォルトでは、改行コード『 \n 』が改行されなかったので、解決した方法を共有します。

styleを使用

styleを指定して whiteSpace: ‘pre-line’ を設定します。

const text = 'あいうえお\nかきくけこ';
return (
  <div style={{whiteSpace: 'pre-line'}}>{text}</div>
);

表示結果

あいうえお
かきくけこ

無事改行されました。

splitでの使用方法。<div>バージョン

改行\nが一個のパターン

改行コード\nで文字列を分割することで改行を表示させます。(改行\nがない場合はそのまま表示されます。)

const text = 'さしすせそ\nたちつてと';
return (
  <div>{text.split('\n').map(t => (<div>{t}</div>))}</div>
);

表示結果

さしすせそ
たちつてと

無事改行されました。

改行コード\nが複数のパターン

ただ気になることとして改行が複数のパターンで空白行を追加したい場合です。

const text = 'なにぬねの\n\nはひふへほ';

表示結果

なにぬねの
はひふへほ

このパターンはNGです。ただの<div></div>が入るだけで改行はされてますが、空白行は表示されません。

三項演算子で空白行の判定

空白行を追加したい場合のパターンですと
三項演算子(if-else文を一行で書いたもの)を使って判定してあげましょう。

const text = 'なにぬねの\n\nはひふへほ';
return (
  <div>
    {text1.split('\n').map(t => (
      t !== '' ? <div>{t}</div> : <br/>
    ))}
  </div>
);

表示結果

なにぬねの

はひふへほ

無事空白行も込みで改行ができました。

<br />で改行

三項演算子だと改行コード量が多くなると処理が遅くなる可能性も。。
その場合だとこちらの<br />を使う方が良いかもです。

const text = 'あかさたな\n\nはまやらわ';
return (
  <div>
    <span>
      {text1.split('\n').map(t => (<span>{t}<br /></span>))}
    </span>
  </div>
);

表示結果

あかさたな

はまやらわ

無事空白行と改行での表示がされました。

最終的に仕上がるHTMLのコードで<br /> が連発するのでコード的には美しくない気がします。。(個人的な意見なので気にしないでください)

splitでの使用。<p>バージョン

ちなみにですがpタグでも可能です。

const text = 'ああああ\nかかかか';
return (
  <div>{text.split('\n').map(t => (<p>{t}</p>))}</div>
);

表示結果

ああああ

かかかか
// 最後の行にも改行が入ってしまう

空白行と改行には成功しましたが、
このやり方ですと最後の行にも改行が入ってしまい空白行が追加されることになります。
最後の行に改行を入れたいという方はpタグでもいいでしょう。

失敗編

こちらからはうまくいかないパターンでした。そちらも共有しておきます。

styleを使用しての失敗編

変数を作らずにそのまま表示させようとしました。

return (
  <div style={{whiteSpace: 'pre-line'}}>あいうえお\nかきくけこ</div>
);

表示結果

あいうえお\nかきくけこ

NGです。そのまま「\n」と改行文字として扱われずただの文字表示されちゃいました。
変数にするしないでReactの中での動きが変わるんでしょうか。。

よく分かっていない部分であります。。

replaceで<br />に置換しようとしての失敗編

\n を <br />に置換して解決しようと思い、

const text = 'ささささ\n\nたたたた';
return (
  <div>
    {text1.replace(/\n/g, '<br />')}
  </div>
);

表示結果

ささささ<br /><br />たたたた

NGです。こちらもそのまま文字として表示されちゃいました。。

ちなみに正規表現(「/\n/g」の部分)を使っています。
文字列でもできますが、それだと最初に見つけた文字しか置換してくれないのでご注意を。


文字列指定での置換バージョン

const text = 'なななな\n\nはははは';
return (
  <div>
    {text1.replace('\n', '<br />')}
  </div>
);

表示結果

なななな<br /> はははは

NGです。2個目の「\n」は空白となって表示されました。。

所感

なにを使えばいいのかはお好みでしょうか。

• styleを直接書くことに抵抗がなければ、styleを使用 でやるのが一番手っ取り早いです。
• styleを直接書くことに抵抗があれば、splitでの使用方法。<p>バージョン。
• 最後に改行が入るのが気になる方は、splitでの使用方法。<div>バージョン。
  • コードにこだわるなら三項演算子ですかね。
  • 特にこだわりなければ<br />バージョンが速度的には速いかと。

個人的には、splitでの使用方法<div>バージョンの三項演算子が好みです。
改行の量が多いようなら、<br />バージョンと使い分けるのが良いかと思っています。